data-* グローバル属性 はカスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、属性を設定した要素の HTMLElement インターフェイスを通して使用できます。HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。
* は、以下の制約と合わせて xml 名の作成規則 に従う名前に置き換えられます:
- XML として使用する場合であっても、名前を
xmlで始めてはならない。 - 名前にコロン (
U+003A) を含めてはならない。 - 名前に大文字の
AからZを含めてはならない。
HTMLElement.dataset プロパティは DOMStringMap であり、またカスタムデータ属性名のハイフン (U+002D) は次の文字を大文字化したものに置き換えられる (キャメルケース) 点に注意してください。よってカスタムデータ属性 data-test-value は HTMLElement.dataset.testValue (または HTMLElement.dataset["testValue"]) としてアクセスできます。
使用方法
data-* 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト" を、class 属性といくつかの data-* 属性を持つ単純な <img> 要素にすることができるでしょう:
<img class="spaceship cruiserX3" src="shipX3.png" data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" onclick="spaceships[this.dataset.shipId].blasted()"> </img>
(詳しくは こちら をご覧ください)
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard data-* の定義 |
現行の標準 | 最新のスナップショットである HTML 5.1 から変更なし。 |
| HTML 5.1 data-* の定義 |
勧告 | WHATWG HTML Living Standard のスナップショットであり、HTML5 から変更はありません。 |
| HTML5 data-* の定義 |
勧告 | WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。 |
ブラウザー実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 6 (6) | (有) | (有) | (有) |
| 機能 | Android | Android 版 Chrome | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | 6.0 (6) | (有) | (有) | (有) | (有) |
関連情報
- すべての グローバル属性。
- これらの値を読み書きできる
HTMLElement.datasetプロパティ。