datasetプロパティ
HTMLでは、タグに独自の属性を追加することが許可されていますが、
その属性はdata-で始まり、
その後に任意の属性名が続く必要があります。
このような属性にJavaScriptでアクセスするには、
特別なプロパティdatasetが使用されます。
構文
要素.dataset.名前;
例
属性の値を読み取ってみましょう:
<div data-cost="1000"></div>
let elem = document.querySelector('div');
let res = elem.dataset.cost;
console.log(res);
コードの実行結果:
'1000'
例
属性の値を変更してみましょう:
<div data-cost="1000"></div>
let elem = document.querySelector('div');
elem.dataset.cost = '2000';
結果、コードは次のようになります:
<div data-cost="2000"></div>
関連項目
-
属性を取得するメソッド
getAttribute,
-
属性を設定するメソッド
setAttribute,