data-*

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

すべてのカスタムデータは、属性を設定した要素の 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 のデータ属性の使用については、データ属性の使用を参照してください。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• すべての グローバル属性。
• これらの値を読み書きできる HTMLElement.dataset プロパティ。
• データ属性の使用。