[JavaScript] data-から始まる独自の属性を取得する

HTML5から独自の属性を追加する際の名前の付け方にルールができた。
<div data-key="value">aiueo</div>
data-○○とつける。

この値をJavaScriptで取得する場合
elem.getAttribute(data-key);
でもできるんだけど、もっと簡単な方法が提供されてた

elem.dataset.key
で取得できる

仮に
<div data-id="100"></div>
の場合
var id = elem.dataset.id; //id = 100
で取得できる

data-○○-○○にするとjQueryとHTML5の仕様で違いが出てしまうらしいので、data-移行にはハイフンを使わない方がいいらしい。



>