JavaScript | data属性の値を変更または削除する方法
JavascriptでHTMLで指定しているdata属性の値を変更または削除する方法を紹介しています。
data属性の値を変更する
JavascriptでHTMLで指定されているdata属性の値を変更する動作サンプルとサンプルコードになります。
See the Pen JavaScript | Get a user agent by yochans (@yochans) on CodePen.
HTMLには、動作テスト用に「data-name」と名付けたdata属性を指定したdivタグをひとつ用意しています。
<div id="item" data-name="abc"></div>上記のHTMLから独自属性dataの「data-name」の値を変更するにはdatasetプロパティを利用します。
datasetはオブジェクトデータとして取得しますので、取得したいdata属性の任意の名前部分を「.」で繋げて指定する事ができます。
サンプルではdata属性「data-name」の値を変更したのち、同じようにdatasetプロパティで値を取得しています。
値が書き換わっている事が確認できます。
また、空の値を指定する事でdata属性の値を削除する事が可能です。
document.querySelector('#item').dataset.name = 'cde';
let name = document.querySelector('#item').dataset.name;
console.log(name);
// defdata属性を削除する
データ属性の値を削除するだけであれば上記の変更時に空の値を指定することで可能です。
独自のdata属性のキーごと削除する場合は、deleteを使ってdatasetプロパティのキーを指定します。
See the Pen JavaScript | Change the value of a data attribute by yochans (@yochans) on CodePen.
<div id="item" data-name="abc"></div>サンプルでは独自のdata属性「data-name」を削除したのち、同じようにdatasetプロパティで値を取得しています。
指定した属性が存在しない為、「undefined」が返ってきている事が確認できます。
delete document.querySelector('#item').dataset.name;
let name = document.querySelector('#item').dataset.name;
console.log(name);
// undefineddata属性の値を取得する方法は以下のページで紹介しています。