HTML は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。data-* 属性により、標準外の属性や DOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

HTML の構文

構文は単純です。あらゆる要素上で、名前がdata- で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。data 属性を使用するとこれだけです。

<main>  <article       data-columns="3"    data-index-number="12314"    data-parent="cars">    <!-- Electric car content -->  </article>  <article       data-columns="3"    data-index-number="12315"    data-parent="cars">    <!-- Solar car content -->  </article>  <article       data-columns="4"    data-index-number="12316"    data-parent="cars">    <!-- Flying car content -->  </article></main>

JavaScript からのアクセス

JavaScript でこれらの属性の値を読み出すことも、とても簡単です。getAttribute() で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。DOMStringMap の形で、dataset プロパティを通して読み出すことができます。

dataset オブジェクトを通してdata 属性を取得するには、属性名のdata- より後の部分を使用して取得します（なお、ダッシュはキャメルケースに変換されます）。

const article = document.querySelector("#electric-cars");// 次のようにしても動作します。// const article = document.getElementById("electric-cars")article.dataset.columns; // "3"article.dataset.indexNumber; // "12314"article.dataset.parent; // "cars"

それぞれのプロパティは文字列であり、読み書きができます。上記の場合、article.dataset.columns = 5 を設定すると、その属性が"5" に変わります。

また、 data 属性セレクターとともにdocument.querySelector() またはdocument.querySelectorAll() を使用して、一致する 1 つの要素またはすべての要素を見つけることもできます。

// data-columns 属性を持つすべての要素を探すconst articles = document.querySelectorAll("[data-columns]");// data-columns="3" のすべての要素を探すconst threeColumnArticles = document.querySelectorAll('[data-columns="3"]');// 結果を反復処理するthreeColumnArticles.forEach((article) => {  console.log(article.dataset.indexNumber);});

CSS からのアクセス

データ属性はプレーンな HTML 属性であるため、CSS からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように CSS で生成コンテンツにおいてattr() 関数を使用して実現できます。

article::before {  content: attr(data-parent);}

CSS の属性セレクターを使用して、次のようにデータに応じてスタイルを変更することもできます。

article[data-columns="3"] {  width: 400px;}article[data-columns="4"] {  width: 600px;}

この JS Bin の例では、これらすべてが一緒に機能していることがわかります。

データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクターと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、このスクリーンキャストを参照してください（JS Bin の例）。

データ値は文字列です。 スタイリングを有効にするには、セレクターで数値を引用符で囲む必要があります。

問題

支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。

関連情報

• この記事は、hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用（英語）から改編されました。
• カスタム属性は SVG 2 も対応しています。 詳細については、HTMLElement.dataset およびdata-* を参照してください。
• HTML の data 属性の使用方法（Sitepoint、英語）