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

来源：互联网发布：java注解不属于编辑：程序博客网时间：2024/06/05 07:40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element.dataset兼容</title>
</head>
<body>

<div id="users" data-id="123" data-name="zqing" data-sd="">
<h2>8882人在学习该课程</h2>
<ul>
<li class="user">Satoshi</li>
<li class="user">春来草青</li>
<li class="user last">kash</li>
</ul>
</div>

<script type="text/javascript">
function dataset(element){
if(element.dataset){//如果支持element.dataset
return element.dataset;//则使用W3C推荐标准
}else{//否则使用以下代码模拟实现
var attributes=element.attributes;//获取节点的所有属性
var name=[],value=[];//定义两个数组保存属性名和属性值
var obj={};//定义一个空对象
for(var i=0;i<attributes.length;i++){//遍历节点的所有属性
if(attributes[i].nodeName.slice(0,5)=="data-"){//如果属性名的前面5个字符符合"data-"
// 取出属性名的"data-"的后面的字符串放入name数组中
name.push(attributes[i].nodeName.slice(5));
//取出对应的属性值放入value数组中
value.push(attributes[i].nodeValue);
}
}
for(var j=0;j<name.length;j++){//遍历name和value数组
obj[name[j]]=value[j];//将属性名和属性值保存到obj中
}
return obj;//返回对象
}
}
//使用示例测试
var div=document.getElementById("users");
var ss=dataset(div);
</script>
</body>
</html>

0 0