html5新特性data_*自定义属性使用

作者:wendy | 创建时间: 2023-03-31
HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用...
html5新特性data_*自定义属性使用

操作方法

获取自定义属性的值 如下: <div id="content" data-age="18">html5 data-*自定义属性 age</div> 多了一个”data-*” 属性, 如何获取呢? //js var 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> //js var 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> //js var content= document.getElementById('content'); content.dataset.name='我叫tom' alert(content.dataset.name) //jquery $('#content').data('name','我叫tom');//写

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

点击展开全文

更多推荐