html5カスタムデータ属性についてちゃんと理解する

http://dresscording.com/blog/html5/custom_data_attribute.html

基本

HTML5では「data-*="value"」の形式で属性名に値を設定できる。
HTML5カスタムデータ属性名は、小文字英数、ハイフン区切りの単語である必要がある。
ちょっと扱いが特殊なだけで、要素の属性であることには変わりない。

利用方法

拡張機能で使うパラメータ指定に使う目的で設定される。
たとえばbootstrapのdata-toggle="collapse"。この属性を指定することで折りたたみ展開が出来る要素になる。

javascriptでの利用方法

<tag id="element" data-camel-case="value">

var element = document.querySelector("#element");
console.log( element.dataset.camelCase ); // 読み込み
element.dataset.camelCase = "value2";     // 変更
element.dataset.camelCase = null;         // 削除

console.log( element.getAttribute("data-camel-case") );  // 普通の属性としても使える

jQueryでの利用方法

<tag id="element" data-camel-case="value">

var jElement = $("#element");
console.log( jElement.data("camelCase") ); // 読み込み
jElement.data("camelCase", "value2");      // 変更
jElement.removeData("camelCase");          // 削除

キャッシュが効くとかでバグの原因になるので使わないほうがいいらしい。