JavaScript | data属性の値を取得する方法
JavascriptでHTMLで指定しているdata属性の値を取得する方法を紹介しています。
data属性の値を取得する
JavascriptでHTMLで指定されているdata属性の値を取得する動作サンプルとサンプルコードになります。
See the Pen JavaScript | Get a user agent by yochans (@yochans) on CodePen.
HTMLには、動作テスト用に「data-num」と名付けたdata属性を指定したdivタグをひとつ用意しています。
<div id="item" data-name="abc"></div>上記のHTMLから独自属性dataの「data-num」の値を取得するにはdatasetプロパティを利用します。
datasetはオブジェクトデータとして取得しますので、取得したいdata属性の任意の名前部分を「.」で繋げて取得する事ができます。
let name = document.querySelector('#item').dataset.name;
console.log(name);
// abc複数のdata属性の値を取得する
複数のdata属性の値を取得する場合は一度、datasetプロパティを変数に格納してから取り出します。
<div id="item" data-num="123" data-name="abc"></div>let dataset = document.querySelector('#item').dataset;
console.log(dataset.num);
console.log(dataset.name);
// 123
// abcdata属性の値を変更する方法、属性を削除する方法は以下のページで紹介しています。