HTML5规范里增加了一个自定义data属性.这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 'data-'开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.使用data-*可以解决自定义属性混乱无管理的现状。
工具/原料
1
Internet Explorer 11+ Chrome 8+ Firefox 6.0+ Opera 11.10+ Safari 6+
2
以上任意浏览器一个
方法/步骤
1
获取自定义属性的值如下：
html5 data-*自定义属性 age
多了一个”data-*” 属性, 如何获取呢?//jsvar content= document.getElementById('content');alert(content.dataset.age)//jquery$('#content').data('age');//读2
读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀，连字符需要转化为驼峰命名
data-user_list自定义属性
//jsvar content= document.getElementById('content');alert(content.dataset.userList)//jquery$('#content').data('userList');//读3
通过js方式给data-*设置值
data-user_list自定义属性
//jsvar content= document.getElementById('content');content.dataset.name='我叫tom'alert(content.dataset.name)//jquery$('#content').data('name','我叫tom');//写4
getAttribute/setAttribute方法的使用var content= document.getElementById('content'); content.dataset.birthDate = '19990619'; content.setAttribute('age', 25); console.log(content.getAttribute('data-age')); //25 console.log(content.getAttribute('data-birth-date')); //19990519