HTMLOrForeignElement.dataset

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

dataset 只读特性在 HTMLOrForeignElement interface provides read/write access to all the 自定义数据属性 ( data- * ) set on the element. This access is available both in HTML and within the DOM. It is a map of DOMString s ( DOMStringMap ) with one entry for each custom data attribute. Note that the dataset property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the dataset , which in turn represent the data attributes. Note also that an HTML data- 属性 and its corresponding DOM dataset. property do not share the same name, but they are always similar:

In HTML, the name of a custom data attribute begins with data- . It must contain only letters, numbers, and the following characters: dash ( - ), dot ( . ), colon ( : ), underscore ( _ )—but NOT any ASCII capital letters ( A to Z ).
In JavaScript, the name of a custom data attribute is the name of the same HTML attribute, but in camelCase and with no dashes, dots, etc.

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

Name conversion

dash-style to camelCase conversion
camelCase to dash-style conversion

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named data-abc-def corresponds to the key abcDef .

Accessing values

Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in element .dataset. keyname
Attributes can also be set and read using the bracket syntax, as in element .dataset[ keyname ]
in operator can be used to check whether a given attribute exists.

Setting values

When an attribute is set, its value is always converted into a string.
- 例如： null is converted into the string "null" .
To remove an attribute, you can use the delete operator .

句法

const dataAttrMap = element.dataset

值

A DOMStringMap .

范例

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set the data attribute
el.dataset.dateOfBirth = '1960-10-03';
// Result: el.dataset.dateOfBirth === 1960-10-03
delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLElement.dataset' in that specification.	实时标准	No change from latest snapshot, HTML 5.1
HTML 5.1 The definition of 'HTMLElement.dataset' in that specification.	推荐	快照 HTML 实时标准 , no change from HTML5
HTML5 The definition of 'HTMLElement.dataset' in that specification.	推荐	快照 HTML 实时标准，初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`dataset`	Chrome 8	Edge 12	Firefox 6	IE 11	Opera 11	Safari 5.1	WebView Android 4.4	Chrome Android 18	Firefox Android 6	Opera Android 11	Safari iOS 5.1	Samsung Internet Android 1.0

图例

完整支持

Please change the compat macro's paramter to


							api.HTMLOrForeignElement.dataset

after BCD is updated.

另请参阅

HTML data-* class of global attributes.
Using data attributes
Element.getAttribute() and Element.setAttribute()

元数据

最后修改： Jul 22, 2020

在此页

Name conversion

Accessing values

Setting values

句法

值

范例

规范

浏览器兼容性

图例

另请参阅

相关话题