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

来源：互联网发布：每日生产报表软件编辑：程序博客网时间：2024/06/05 04:43

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>

阅读全文

0 0