JavaScriptでdata-で始まる属性の値を取得する
最終更新日:2016-07-29
data-
で始まる属性をカスタムデータ属性(custom data attributes)と呼びます。これを使うと要素に好きなデータを持たせることができます。
これをJavaScriptで取得するには、attributesを使って取得する手もありますが、dataset
を使うとさらに簡単に取得できます。
例えば、次のようにdiv
要素にname
とlevel
属性を付けたとします。
<div id="character" data-name="mokera" data-level="1"></div>
これをJavaScriptから取得してみます。
var c = document.getElementById('character');
console.log(c.dataset.name); // mokera が表示される
console.log(c.dataset.level); // 1 が表示される