MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

data-*

data-* グローバル属性カスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、属性を設定した要素の HTMLElement インターフェイスを通して使用できます。HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。

* は、以下の制約と合わせて xml 名の作成規則 に従う名前に置き換えられます:

  • XML として使用する場合であっても、名前を xml で始めてはならない。
  • 名前にコロン (U+003A) を含めてはならない。
  • 名前に大文字の A から Z を含めてはならない。

HTMLElement.dataset プロパティは DOMStringMap であり、またカスタムデータ属性名のハイフン (U+002D) は次の文字を大文字化したものに置き換えられる (キャメルケース) 点に注意してください。よってカスタムデータ属性 data-test-valueHTMLElement.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) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,