data-*

ジャンプ先:
  1. 仕様書
  2. ブラウザーの対応
  3. 関連情報

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

 

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

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

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

タグ: 
このページの貢献者: ln-north, mfuji09, yyss
最終更新者: ln-north,