data- 自定义属性的细节

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-属性设计的专用获取方法.