JavaScriptでカスタムデータ属性の値を取得・変更する
published:
2018.04.09 /
modified:
JavaScript で、カスタムデータ属性の値を取得する方法、変更する方法を見ていく。
カスタムデータ属性 ( data-* )
カスタムデータ属性は、html要素に対して、設定することができる独自の属性。
属性名は data- から始まる。
<div id="example" data-hoge="fuga"></div>
dataset でカスタムデータ属性の値を取得
dataset プロパティを利用して、カスタムデータ属性の値を取得する。
var hoge = document.getElementById('example').dataset.hoge;
getAttribute でカスタムデータ属性の値を取得
getAttribute メソッドを利用して、カスタムデータ属性の値を取得する。
var hoge = document.getElementById('example').getAttribute('data-hoge');
dataset でカスタムデータ属性の値を変更
dataset プロパティを利用して、カスタムデータ属性の値を変更する。
document.getElementById('example').dataset.hoge = 'piyo';
setAttribute でカスタムデータ属性の値を変更
setAttribute メソッドを利用して、カスタムデータ属性の値を変更する。
document.getElementById('example').setAttribute('data-hoge', 'piyo');