HTML要素.dataset 対応: HTML5（IE起源→標準化）

HTML要素のカスタムデータ属性（data-*属性）を読み書きするためのプロパティです。HTMLにデータを埋め込み、JavaScriptから簡単にアクセスできます。

構文

// data属性の値を取得します。
var value = element.dataset.キー名;

// data属性の値を設定します。
element.dataset.キー名 = "値";

// data属性を削除します。
delete element.dataset.キー名;

サンプルコード

<div id="user" data-name="太郎" data-age="25" data-is-active="true">ユーザー情報</div>

var user = document.querySelector("#user");

// data属性の値を取得します。『data-』の部分は省略します。
console.log(user.dataset.name); // 『太郎』と出力されます。
console.log(user.dataset.age); // 『25』と出力されます。

// ハイフン区切りの属性名はキャメルケースに変換します。
// 『data-is-active』は『isActive』でアクセスします。
console.log(user.dataset.isActive); // 『true』と出力されます。

// data属性の値を設定します。
user.dataset.role = "admin";

// data属性を削除します。
delete user.dataset.age;

概要

『HTML要素.dataset』はHTML要素に設定されたカスタムデータ属性（data-*属性）にアクセスするためのプロパティです。HTMLの属性名から『data-』を除いた部分がキー名になり、ハイフン区切りの場合はキャメルケースに変換してアクセスします。例えば『data-user-id』は『dataset.userId』で取得・設定できます。

『HTML要素.dataset』で取得される値は常に文字列です。数値として使いたい場合は『Number()』や『parseInt()』で変換する必要があります。同様に、真偽値として使いたい場合も文字列の『"true"』『"false"』として返されるため、比較時に注意してください。

data属性はHTMLの仕様で認められた正式なデータ埋め込みの方法です。『HTML要素.getAttribute()』でも取得可能ですが、『HTML要素.dataset』の方がオブジェクトのプロパティとして直感的にアクセスでき、読み書きも簡潔に記述できます。