独自データ属性（カスタム属性）を設定する
独自データ属性（カスタム属性）を使うと、
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