▲TOPへ戻る

【javascript】data属性とは?datasetで、取得、更新、追加する方法

dataset

data属性とは

data属性を要素に指定することにより、要素に補足情報を与えることができます。

<要素 data-*="">〇〇〇</要素>

*は任意に設定することができます。

例)data-value, data-name

参考

js
【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する

取得

要素.dataset.data-value

HTML
  <div class="el" data-value="true"></div> 
javascript
  const el = document.querySelector(".el");
  console.log(el.dataset.value);
  // 結果 : true

取得し、内容を書き換える

(1)をクリックしてみてください。

今日は晴れると思っていた。(1)、雨が降ってしまった。

HTML
  <p>今日は晴れると思っていた。
    <span class="conjunction" data-value="しかし">(1)</span>
    、雨が降ってしまった。</p>
javascript
  document.querySelector(".conjunction").addEventListener("click", function(){
    this.textContent = this.dataset.value;
  });

getAttributeを使う

getAttributeでも取得できます。お好みで。

HTML
  <div class="el" data-value="true"></div> 
javascript
  const el = document.querySelector(".el");
  console.log(el.getAttribute("data-value"));
  // 結果 : true

更新

以下の記述でを書き換えることができます。

要素.dataset.data-value = ""

HTML
  <div class="el" data-value="true"></div> 
javascript
  const el = document.querySelector(".el");
  console.log(el.dataset.value = "false");

以下のように、HTMLに変更が加えられました。

HTML
  <div class="el" data-value="false"></div> 

追加

以下は、data属性が設定されてない状態です。

HTML
  <div class="test"></div>

要素.dataset.name(任意) = ""

ポイント : nameキャメルケース で書くこと。

userNameA(キャメルケース)

javascript
  document.querySelector(".test").dataset.name="name"
  document.querySelector(".test").dataset.userNameA="userNameA"
  document.querySelector(".test").dataset.userNameB="userNameB"
  document.querySelector(".test").dataset.value="value"

HTMLでは、ケバブケースになっています。user-name-A

HTML
  <div 
    class="test" 
    data-name="name" 
    data-user-name-a="userNameA" 
    data-user-name-b="userNameB" 
    data-value="value">
  </div>

まとめ

  1. 取得 : 要素.dataset.data-value
  2. 更新 : 要素.dataset.data-value = ""
  3. 追加 : 要素.dataset.name(任意) = ""

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ