data属性
HTMLのdata属性では、HTML要素に関する任意のカスタムデータを格納することができます。
data属性は、data- から始まる属性名をもち、一つのHTML要素に対して複数のdata属性を設定することも可能です。
<div data-user-id="123" data-user-name="John">ユーザー</div>上記の例では、data-user-id と data-user-name という2つのカスタムデータが設定されています。
data属性によって設定されたカスタムデータは、JavaScriptを使って要素から取得したり、要素に設定したりすることができます。
JavaScriptでdata属性を取得する
id属性からHTML要素を取得して、取得した要素のdatasetプロパティを使ってdata属性の値を取得します。
<div id="user" data-user-id="123" data-user-name="John">ユーザー</div>// id属性からHTML要素を取得する
const elem = document.querySelector('#user');
// 取得したHTML要素から data-user-id属性の値を取得する
const dataValue = elem.dataset.userId;
// 取得したHTML要素から data-user-name属性の値を取得する
const dataValue = elem.dataset.userName;datasetに対して、取得したいdata属性のプロパティ名の data- を除いた属性名を指定して取得します。
複数の単語をハイフンで結合している場合には、キャメルケースで指定します。
JavaScriptでdata属性を追加する
id属性からHTML要素を取得して、取得した要素に追加したいdatasetプロパティを使ってdata属性の値を追加します。
<div id="user" data-user-name="John">ユーザー</div>// id属性からHTML要素を取得する
const elem = document.querySelector('#user');
// 取得したHTML要素に data-user-age属性を追加する
elem.dataset.userAge = 18;data属性を取得した時とは逆に、data- が属性名の先頭に加えられ、キャメルケースで設定した名前がハイフン区切りのプロパティ名で追加されます。
今回data属性を追加した後のHTMLは以下になります。
<div id="user" data-user-name="John" data-user-age="18">ユーザー</div>JavaScriptでdata属性を変更する
id属性からHTML要素を取得して、datasetプロパティを使ってすでに存在するdata属性の値を変更します。
<div id="user" data-user-name="John">ユーザー</div>// id属性からHTML要素を取得する
const elem = document.querySelector('#user');
// 取得したHTML要素のdata-user-name属性を変更する
elem.dataset.userName = 'Mike';すでに存在するdata属性に対して、data属性を追加する時と同じ方法で値の変更ができます。
今回data属性を変更した後のHTMLは以下になります。
<div id="user" data-user-name="Mike">ユーザー</div>まとめ
JavaScriptのdatasetを使うことで、HTML要素のdata属性の値を取得したり、追加・変更したりすることができます。
HTML要素のdata属性を操作する方法をマスターしておけば、WEBページの作成において非常に役に立ちます。
コメント