モケラ

Tech Sheets

mokelab

JavaScriptでdata-で始まる属性の値を取得する

最終更新日:2016-07-29

data-で始まる属性をカスタムデータ属性(custom data attributes)と呼びます。これを使うと要素に好きなデータを持たせることができます。

これをJavaScriptで取得するには、attributesを使って取得する手もありますが、datasetを使うとさらに簡単に取得できます。

例えば、次のようにdiv要素にnamelevel属性を付けたとします。

<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 が表示される

一覧に戻る