備忘録的プログラミングリファレンス

data-* 属性

　data-* 属性は、HTMLエレメントのグローバル属性で、カスタムデータを構成するための属性です。
　任意のデータを、HTMLとスクリプトの間で共有することができます。HTML にスクリプトで使うデータを設定しておけるのですが、そのデータの取得は Web AIP の DOM を通して行います。

- ad -

data-* 属性の名称

　data-* 属性には、* を以下の制約に従った名称に置き換えます。

  • XML名の作成規則に従う
  • 大文字のAからZまでの文字を含めない
  • xmlで始めない
  • ;（セミコロン）を含めない

HTMLエレメントとdata-*属性

　HTML での data-* 属性は他のHTML属性と同じように設定するのですが、* の部分が任意の名称になります。

<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359">
  Tokyo
</li>

スクリプトと data-* 属性

スクリプトから data-* 属性を操作するには、値の取得には getAttribute メソッド、値の設定には setAttribute メソッドを使う方法があります。
　値はすべて文字列として扱われます。

getAttribute メソッドを使った data-* 属性の値の取得です。

var tokyo_obj = document.getElementById("tokyo");
var city_type = tokyo_obj.getAttribute("data-type");

　setAttribute を使った値を設定するには以下のようにします。

tokyo_obj.setAttribute("data-type", "big　city");

HTMLElement.dataset プロパティ

　HTMLElement.dataset プロパティによっても data-* 値の取得と設定ができます。

　data-* は、DOMStringMap にキーとしてエントリーされています。

　HTMLElement.dataset プロパティを利用して data-* を操作するためには、"data-" 部分を外して*部分の任意の名称をダッシュスタイルからキャメルケースに替える必要があります。

<li id="tokyo" data-type="city" data-population="13951636" data-population-density="6359">
  Tokyo
</li>

var city_obj = document.querySelector('#tokyo');

alert( city_obj.dataset.populationDensity );

ダッシュスタイルからキャメルケース

　DOMStringMap にエントリーされると、data-* 属性の名称はダッシュスタイルからキャメルケースに替えられます。以下のルールがあります。

  • プレフィックス data-* を削除
  • -（ダッシュ）に ASCII 文字のaからzが続く場合、ダッシュを削除し、小文字を対応する大文字に変換
  • 他の文字は変更しない
data-abc-def-ghi <---> abcDefGhi

jQuery と data-* 属性

　jQuery での data-* 属性の扱い方です。

var tokyo_obj = $("#tokyo");

var city_type = tokyo_obj.data("data-population-density");	// 値の取得

tokyo_obj.data("data-population-density", "6359");		// 値の設定

　jQuery ではキャメルケースでも使えます。

var tokyo_obj = $("#tokyo");

var city_type = tokyo_obj.data("populationDensity");	// 値の取得

tokyo_obj.data("populationDensity", "6359");		// 値の設定

- ad -

関連（Related）