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 のデータ属性の使用については、データ属性の使用を参照してください。

仕様書

Specification
HTML Standard
# attr-data-*

ブラウザーの互換性

BCD tables only load in the browser

関連情報