data-* グローバル属性カスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。

 

すべてのカスタムデータは、属性を設定した要素の HTMLElement インターフェイスを通して使用できます。 HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。
* は、 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>

もっと深い HTML のデータ属性の使用については、データ属性の使用を参照してください。

仕様書

仕様書 状態 備考
HTML Living Standard
data-* の定義
現行の標準 最新のスナップショットである HTML 5.1 から変更なし。
HTML 5.1
data-* の定義
勧告 HTML Living Standard のスナップショット、 HTML5 から変更なし
HTML5
data-* の定義
勧告 HTML Living Standard のスナップショット、初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり

関連情報

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

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