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 -