1. data 与 dataset的定义与使用
data-* 属性是 HTML5 中的新属性, 我们可以使用data-
前缀设置需要的自定义属性,来存储页面或应用程序的私有自定义数据,
我们可以使用dataset属性(对象)访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集
例子:
<div id="student" data-age="12" data-name="zhang">张三</div>
可以通过以下方式获取
var ele = document.getElementById('student');
var age = ele.dataset.age; // "12"
注意语法规则,属性名称 data-abc-def
与键值 abcDef 相对应
2.兼容性
所有主流浏览器都支持 data-* 属性,部分浏览器支持dataset
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
https://caniuse.com/#feat=dataset
3.兼容方案
function dataset(element){
var obj={};
if(element.dataset){
return element.dataset;
}else{
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 ele = document.getElementById('student');
console.log(dataset(ele))
console.log(dataset(ele).age);
参考:
https://blog.csdn.net/qq_21794603/article/details/72732150?utm_source=blogxgwz0