1:概念:
自定义属性是H5新增的功能,最初的设计初衷是为了记录页面中的一些信息,比如一个按钮的点击次数等等.
2语法:
data-attribute 其中attribute可以是传统的数字,字母下划线,也可以是dash (-
), dot (.
), colon (:
).
注意:若attribute是大写字母的话,会出现一些不同,下文会说明
3:获取自定义属性值的方法:
A:Dom获取,即getAttrtibute
document.getElementById('').getAttribute('data-attribute');
这种方法是万能的,不会出现任何问题,可以获取元素的其他属性
B:H5提供了专用的方法即ele.dataset.attribute
<div class="div1" data-index="1"></div>
获取则为:document.getElementByClassName('div1')[0].dataset.index //111
但是当attrtibute为大写字母时则无法获取该属性
<div class="div1" data-Do="hello"></div>
var div1=document.getElementsByClassName('div1')[0];
console.log(div1.getAttribute('data-Do')); //undefined
总结:getAtrtribute获取的兼容性更高,不仅可以获取自定义属性,还可以获取其他属性
ele.dataset.attr的方法属性值不能为大写字母,并且是为获取data-属性设计的专用获取方法.