JavaScriptで data属性の値を取得・変更する

published:

カスタムデータ属性 ( data-* )

カスタムデータ属性は、html要素に対して、設定することができる独自の属性。
属性名は data- から始まる。

<div id="example" data-hoge="fuga"></div>

JavaScript でカスタムデータ属性の値を取得する

JavaScript の dataset プロパティを利用することで、カスタムデータ属性の値を取得することができる。

<div id="example" data-hoge="fuga"></div>
console.log(document.getElementById('example').dataset.hoge); // fuga

JavaScript でカスタムデータ属性の値を変更する

同じく、JavaScript の dataset プロパティを利用して、カスタムデータ属性の値を変更する。

document.getElementById('example').dataset.hoge = "piyo";

Previous Article

Next Article