data属性を取得する・設定する JavaScript
data属性を取得する・設定する
こういうHTMLのdata属性があった場合にdata-***の値を取得したい。
|
1 2 3 |
<button id="Remove-1" data-index="1">削除</button> <button id="Remove-2" data-index="2">削除</button> <button id="Remove-3" data-index="3">削除</button> |
datasetプロパティを使えば取得できる。
|
1 2 3 4 5 |
const targets = document.querySelectorAll('button'); targets.forEach((target) => { console.log(target.dataset.index); // data-***="1"の***の部分を指定する }); |
data属性がdata-***-***のようにハイフンでつながっていたら、
|
1 2 3 |
<button id="Remove-1" data-index-number="1">削除</button> <button id="Remove-2" data-index-number="2">削除</button> <button id="Remove-3" data-index-number="3">削除</button> |
キャメルケースで指定する。
|
1 2 3 4 5 |
const targets = document.querySelectorAll('button'); targets.forEach((target) => { console.log(target.dataset.indexNumber); }); |
設定や更新もdatasetプロパティで動的に行える。
|
1 2 3 |
const target = document.querySelector('button'); target.dataset.userName = "hoge"; // <button data-user-name="hoge"></button> |
コメント
コメントはありません。