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





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值