data-*
data-*
グローバル属性 はカスタムデータ属性と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
すべてのカスタムデータは、属性を設定した要素の 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
関連情報
- すべてのグローバル属性
- これらの値を読み書きできる
HTMLElement.dataset
プロパティ - データ属性の使用