【HTML】自定义属性（data）

作者：System 时间：2024年08月21日分类：所有,html 字数：539

在HTML中，自定义数据属性可以通过data-前缀来添加。这些属性可以用于存储页面的数据，而不会影响标记的有效性。

例如，如果你想为某个元素添加一些额外的信息，可以这样做：




<div id="myElement" data-animal="cat" data-age="3"></div>

在上面的例子中，div元素有两个自定义数据属性：data-animal和data-age。

在JavaScript中，你可以通过dataset属性来访问这些自定义数据属性：




document.getElementById('myElement').dataset.animal; // 返回 "cat"
document.getElementById('myElement').dataset.age; // 返回 "3"

要注意的是，dataset属性返回的是一个对象，你可以通过访问这个对象的属性来获取对应的自定义数据属性的值。属性名称将被转换为驼峰式命名（data-animal-name变为dataset.animalName）。