data-*

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

試してみましょう

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

  • 大文字小文字にかかわらず、名前を xml で始めてはならない。
  • 名前にコロン (:) を含めてはならない。
  • 名前に大文字を含めてはならない。

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

使用方法

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

html
<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
# attr-data-*

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
data-* attributes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報