独自データ属性(カスタム属性)を設定する

独自データ属性(カスタム属性)を使うと、 HTMLの要素に対して独自に属性を追加することができます。
WebサイトやWebアプリケーションを作成する場合に、 自由に属性を増やせるので便利です。

独自データ属性は「data-hoge="値"」のように、 属性名の先頭に「data-」を付けます。

<div data-hoge="a">
コンテンツ
</div>

独自データ属性は複数指定することもできます。

<div data-season="spring" data-color="white">
コンテンツ
</div>

独自データ属性の値を取得する

JavaScriptとjQueryで独自データ属性の値を取得する方法を紹介します。

HTML 共通

<div id="test" data-hoge="a">
	コンテンツ
</div>

JavaScript

JavaScriptでは「dataset」プロパティを使って、 「dataset.」の後に独自データ属性名を指定します。 指定するのは「data-hoge」ではなく「hoge」です。

var elem = document.getElementById("test");

console.log(elem.dataset.hoge); // a

jQuery

jQueryでは「data」メソッドを使って取得します。

var value = $("#test").data("hoge");

console.log(value);  // a