JavaScript 複数のdata属性の値を取得する方法
環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit
構文
document.querySelector('セレクター’).dataset;
複数のdata属性の値を取得する場合は一度、datasetプロパティを変数に格納してから取り出します。
datasetはオブジェクトデータとして取得しますので、取得したいdata属性の
任意の名前部分を「.」で繋げて取得します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="item" data-num="668" data-name="cft"></div>
<button onclick="funA()">テスト</button>
<script>
function funA() {
let obj = document.querySelector('#item').dataset;
alert(obj.name);
alert(obj.num);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="item" data-num="668" data-name="cft"></div>
<button onclick="funA()">テスト</button>
<script>
function funA() {
let obj = document.querySelector('#item').dataset;
alert(obj.name);
alert(obj.num);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="item" data-num="668" data-name="cft"></div>
<button onclick="funA()">テスト</button>
<script>
function funA() {
let obj = document.querySelector('#item').dataset;
alert(obj.name);
alert(obj.num);
}
</script>
</body>
</html>
実行結果
「テスト」ボタンを押すと、「cft」と「668」が表示されます。