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');

Previous Article

Next Article