JS自定义data-*属性

来源：互联网发布：淘宝的发货人能不能改编辑：程序博客网时间：2024/06/03 22:57

这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.

<div id="content" data-age="18">html5 data-*自定义属性 age</div>

//jsvar content= document.getElementById('content');alert(content.dataset.age)//jquery$('#content').data('age');//读

读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀，连字符需要转化为驼峰命名

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>//jsvar content= document.getElementById('content');alert(content.dataset.userList)//jquery$('#content').data('userList');//读

通过js方式给data-*设置值

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>//jsvar content= document.getElementById('content');content.dataset.name='我叫tom'alert(content.dataset.name)//jquery$('#content').data('name','我叫tom');//写

0 0