实现浏览器兼容版的element.dataset

最新推荐文章于 2023-07-04 17:08:09 发布

原创最新推荐文章于 2023-07-04 17:08:09 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dataset #dataset兼容

dom编程专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在低版本的Internet Explorer浏览器中实现与现代浏览器相兼容的element.dataset属性，以获取和操作自定义元素属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>