data-属性的作用是什么？

最新推荐文章于 2023-08-02 21:18:52 发布

转载最新推荐文章于 2023-08-02 21:18:52 发布 · 1.2w 阅读

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML5新增的自定义data属性，探讨了如何使用这些属性来增强页面元素的功能性和可维护性，并提供了通过JavaScript操作这些属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5规范里增加了一个自定义data属性.

为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10

需要注意的是，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');//读

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

通过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');//写
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