html5——自定义属性
自定义属性:添加前缀“data-”
dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀)
data-name:dataset.name
data-name-first:dataset.nameFirst
html结构:
1 <div id="div1" data-name="china" data-name-all="chinese">div</div>
1.利用 getAttribute、setAttribute 存取 dataset
1 var oDiv = document.getElementById("div1"); 2 3 //get 4 console.log(oDiv.getAttribute("data-name")); // china 5 console.log(oDiv.getAttribute("data-name-all")); // chinese 6 7 8 //set 9 oDiv.setAttribute("data-name","hello"); 10 oDiv.setAttribute("data-name-all","hi");
这样就可以以一种更兼容的方式,来存取dataset数据。所做出的任何更改,都是可以实时反映到元素data属性上的。
但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。
2.利用 dataset API 存取 dataset
1 var oDiv = document.getElementById("div1"); 2 3 //get 4 console.log(oDiv.dataset.name); // china 5 console.log(oDiv.dataset.nameAll); // chinese 6 7 8 //set 9 oDiv.dataset.name = 'hello'; 10 oDiv.dataset.nameAll = 'hi';
3.利用 jQuery.attr 方法存取 dataset
1 //get 2 console.log($('#div1').attr('data-name')); // china 3 console.log($('#div1').attr('data-name-all')); // chinese 4 5 6 //set 7 $('#div1').attr('data-name', 'hello'); 8 $('#div1').attr('data-name-all', 'hi');
4.利用 jQuery.data 方法存取 dataset
1 //get 2 console.log($('#div1').data('name')); // china 3 console.log($('#div1').data('nameAll')); // chinese 4 5 6 //set 7 $('#div1').data('name', 'hello'); 8 $('#div1').data('nameAll', 'hi');
这样的方法也能出色的存取data属性,但是需要注意,jQuery.data对data数据做出的更改,不会反映到HTML元素data属性上。