data-*属性
data-*属性は、HTMLエレメントのグローバル属性で、カスタムデータを構成するための属性です。
任意のデータを、HTMLとスクリプトの間で共有することができます。HTMLにスクリプトで使うデータを設定しておけるのですが、そのデータの取得はDOMを通して行います。
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メソッドを使います。
値はすべて文字列として扱われます。
var tokyo_obj = document.getElementById("tokyo"); var city_type = tokyo_obj.getAttribute("data-type");
data-*属性の値の取得です。
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"); // 値の設定
関連(Related)
HTML、CSS、DOMの基本用途一覧です。基本としていますが、公の基準ではありません。
HTML
CSS
- コメントアウト
- /* , */
- @ルール(at-rule)
- @import、 @media
- 一括指定
- all
- 最優先
- !important
- 擬似クラス、疑似エレメント
- 擬似クラス、疑似エレメント
DOM
- コメントアウト
- /* , */ もしくは 行頭に // (JavaScriptのコメントアウトです)
Event、Node
- インターフェイス
- EventTarget、 Event、 Node、 NodeList
- イベント
- error、 fullscreenchange、 fullscreenerror
- プロパティ
- bubbles、 cancelable、 currentTarget、 defaultPrevented、 detail、 eventPhase、 isTrusted、 target、 timeStamp、 type、 view
- メソッド
- preventDefault()、 stopImmediatePropagation()、 stopPropagation()
クッキー、Web Storage
- インターフェイス
- StorageEvent
- イベント
- プロパティ
- メソッド