Dataset
The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.
Note: 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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 7 | 12 | 6 | 5.1 | 18 | 5 | |
| DOM API | ||||||
| The DOMStringMap interface is used for the HTMLElement.dataset attribute, to represent data for custom attributes added to elements. | 7 | 12 | 6 | 5.1 | 18 | 5 |
| The dataset read-only property of the MathMLElement interface provides read/write access to custom data attributes (data-) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data- attribute. | 109 | 109 | 71 | 13.1 | 109 | 13.4 |
| The dataset read-only property of the SVGElement interface provides read/write access to custom data attributes (data-) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data- attribute. | 55 | 17 | 51 | 5.1 | 55 | 5 |
Syntax
<div id="user" data-id="42" data-role="admin" data-full-name="山田太郎">
</div>
<script>
const el = document.getElementById('user');
console.log(el.dataset.id); // "42"
console.log(el.dataset.fullName); // "山田太郎"
</script>Live demo
Data-* Custom Dataattribute
Usagepossible. with Data-* attribute in HTMLelement to custom data attach.CSS.
CSS Attr() and. combination
Display.tooltipequal to usage. with Data attribute. Value CSS. content
Use cases
-
Using Dataset
The dataset read-only property
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.