Dataset
The dataset API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.
Overview
The dataset API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 7 | 12 | 6 | 5.1 | 18 | 5 | |
| 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. | 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 API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features