data-*

試してみましょう

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

すべてのカスタムデータは、属性を設定した要素の HTMLElement インターフェイスを通して使用できます。 HTMLElement.dataset プロパティがそれらへのアクセス手段を提供します。
* は、 XML 名の作成規則に加えて以下の制約に従う名前に置き換えることができます。

大文字小文字にかかわらず、名前を xml で始めてはならない。
名前にセミコロン (U+003A) を含めてはならない。
名前に大文字を含めてはならない。

なお、 HTMLElement.dataset プロパティは DOMStringMap であり、またカスタムデータ属性名のハイフン (U+002D) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 data-test-value は HTMLElement.dataset.testValue (または HTMLElement.dataset["testValue"]) としてアクセスできます。

使用方法

data-* 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト" を、単純な <img> 要素に class 属性といくつかの data-* 属性を設定したもので表すことができるでしょう。

<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()">

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

data-*

試してみましょう

使用方法

仕様書

ブラウザーの互換性

関連情報