实现浏览器兼容版的element.dataset_通过elementdataset属性名存在浏览器兼容问题

作者：从前慢现在也慢 | 2024-03-17 05:56:25

踩

通过elementdataset属性名存在浏览器兼容问题

element.dataset获取自定义属性时（element.dataset.id)，在一些低版本的IE浏览器下不兼容,兼容解决性代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dataset</title>
    <style>
        li{cursor: default;line-height: 1.8;}
        table{border-collapse: collapse;}
        th, td, caption{padding: 10px;border: 1px solid #ddd;font-size: 14px;}
        th{color: #999;}
        caption{font-size: 20px;font-weight: bold;border-bottom: none;}
        #card{position: absolute;top: 10px;left: 150px;}
    </style>
</head>
<body>
    <ul>
        <li data-id="123456" data-account-name="wwq"
            data-name="魏文庆" data-email="wwq123@163.com" 
            data-mobile="13524543878" datanew='123'>wwq</li>
        <li data-id="123457" data-account-name="cjf"
            data-name="蔡剑飞" data-email="cjf123@163.com" 
            data-mobile="13968789868">cjf</li>
    </ul>
    <script>
        function dataset(element){
            var obj={};
            if(element.dataset){
                return element.dataset;
            }else{
                // console.log(element.attributes);
                for(var i=0;i<element.attributes.length;i++){
                    var key=element.attributes[i].nodeName;
                    if(/^data-\w+$/.test(key)){//判断是否以data-开头的属性名
                        var value=element.attributes[i].nodeValue;//值
                        var keyName=key.match(/^data-(\w+)/)[1];//键名
                        obj[keyName]=value;//对象添加属性
                    }
                }
            }
            return obj;
        }
        var li = document.getElementsByTagName('li')[0];
        console.log(dataset(li))
        console.log(dataset(li).id);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/254420