HTMLElement: dataset 属性
HTMLElement 接口的只读属性 dataset 提供了对元素上自定义数据属性 (data-*) 的读/写访问。它暴露了一个字符串映射表 (DOMStringMap)，其中包含每个 data-* 属性的条目。
注意： dataset 属性本身可以读取，但不能直接写入。相反，所有写入都必须针对 dataset 中的各个属性进行，这些属性代表了数据属性。
HTML data-* 属性及其对应的 DOM dataset.property 根据其读取或写入的位置修改其共享名称。
- 在 HTML 中
-
属性名称以
data-开头。它只能包含字母、数字、连字符 (-)、句点 (.)、冒号 (:) 和下划线 (_)。任何 ASCII 大写字母 (A到Z) 都将转换为小写。 - 在 JavaScript 中
-
自定义数据属性的属性名与 HTML 属性名相同，但去掉了
data-前缀。单连字符 (-) 会被移除，并且在移除的连字符后的下一个 ASCII 字符将被大写，从而形成属性的驼峰式命名。
HTML 和 JavaScript 格式之间的转换的详细信息和示例将在下一节中更详细地描述。
除了下面的信息，您还可以在我们的文章 使用数据属性 中找到有关使用 HTML 数据属性的指南。
名称转换
dash-style到camelCase的转换-
自定义数据属性名通过以下方式转换为
DOMStringMap条目的键：- 将所有 ASCII 大写字母 (
A到Z) 转换为小写； - 移除前缀
data-(包括连字符)； - 对于任何后跟 ASCII 小写字母
a到z的连字符 (-)，移除连字符并将字母大写； - 其他字符 (包括其他连字符) 保持不变。
- 将所有 ASCII 大写字母 (
camelCase到dash-style的转换-
相反的转换，它将一个键映射到一个属性名，使用以下方法：
- 限制： 在转换之前，连字符 *不得* 紧跟 ASCII 小写字母
a到z； - 添加
data-前缀； - 在任何 ASCII 大写字母
A到Z前添加连字符，然后将字母小写； - 其他字符保持不变。
- 限制： 在转换之前，连字符 *不得* 紧跟 ASCII 小写字母
例如，data-abc-def 属性对应 dataset.abcDef。
访问值
- 属性可以通过驼峰式名称/键作为 dataset 的对象属性来设置和读取：
element.dataset.keyname。 - 属性也可以使用方括号语法来设置和读取：
element.dataset['keyname']。 - 可以使用
in运算符 检查属性是否存在：'keyname' in element.dataset。请注意，这将遍历dataset的 原型链，如果外部代码污染了原型链，则可能不安全。有几种替代方法，例如Object.hasOwn(element.dataset, 'keyname')，或者只是检查element.dataset.keyname !== undefined。
设置值
-
设置属性时，其值始终转换为字符串。例如：
element.dataset.example = null将被转换为data-example="null"。 -
要删除属性，可以使用
delete运算符：delete element.dataset.keyname。
值
一个 DOMStringMap。
示例
<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
Carina Anand
</div>
const el = document.querySelector("#user");
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'carinaanand'
// el.dataset.dateOfBirth === ''
// set a data attribute
el.dataset.dateOfBirth = "1960-10-03";
// Result on JS: el.dataset.dateOfBirth === '1960-10-03'
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth="1960-10-03">Carina Anand</div>
delete el.dataset.dateOfBirth;
// Result on JS: el.dataset.dateOfBirth === undefined
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand">Carina Anand</div>
if (el.dataset.someDataAttr === undefined) {
el.dataset.someDataAttr = "mydata";
// Result on JS: 'someDataAttr' in el.dataset === true
// Result on HTML: <div id="user" data-id="1234567890" data-user="carinaanand" data-some-data-attr="mydata">Carina Anand</div>
}
规范
| 规范 |
|---|
| HTML # dom-dataset-dev |
浏览器兼容性
加载中…
另见
- HTML
data-*类全局属性 - 使用数据属性
Element.getAttribute()和Element.setAttribute()