Dataset
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (DOMStringMap) で、それぞれの data-* 属性の項目です。
メモ: dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。 すべての書き込みは、個々の data 属性を表す dataset 内の個々のプロパティを表します。
また、 HTML の data-* 属性とそれに対応する DOM の dataset.プロパティ は同じ名前にはなりませんが、次のように常に近いものになります。
HTML では
属性の名前は、 data- で始まります。文字、数字、ダッシュ (-)、ドット (.)、コロン (:)、アンダースコア (_) のみを入れることができます。ASCII 大文字の A から Z は小文字に変換されます。
JavaScript では
カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から data- の接頭辞を除いたものですが、そのプロパティのキャメルケースの名前であり、単一のダッシュ (-) を除いたものです。
以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 7 | 12 | 6 | 5.1 | 18 | 5 | |
| DOM API | ||||||
| DOMStringMap インターフェイスは、要素に追加されたカスタム属性のデータを表すために HTMLElement.dataset/SVGElement.dataset 属性で使用されます。 | 7 | 12 | 6 | 5.1 | 18 | 5 |
| MathMLElement インターフェースの dataset read-only プロパティは、要素上のカスタムデータ属性 (data-) への読み書きアクセスを提供する。これは、各 data- 属性のエントリを持つ文字列のマップ（DOMStringMap）を公開します。 | 109 | 109 | 71 | 13.1 | 109 | 13.4 |
| dataset は SVGElement インターフェイスの読み取り専用プロパティで、要素のカスタムデータ属性 (data-) への読み書きアクセスを提供します。これは文字列のマップ (DOMStringMap) を公開し、各 data- 属性の項目を持つ文字列の地図（DOMStringMap）を公開します。 | 55 | 17 | 51 | 5.1 | 55 | 5 |
基本構文
<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>ライブデモ
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
実務での使いどころ
-
Dataset の活用
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。