datasetプロパティ

HTMLでは、タグに独自の属性を追加することが許可されていますが、 その属性はdata-で始まり、 その後に任意の属性名が続く必要があります。 このような属性にJavaScriptでアクセスするには、 特別なプロパティdatasetが使用されます。

構文

javascript要素.dataset.名前;

例

属性の値を読み取ってみましょう：

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

コードの実行結果：

javascript'1000'

例

属性の値を変更してみましょう：

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
elem.dataset.cost = '2000';

結果、コードは次のようになります：

html<div data-cost="2000"></div>

関連項目