【javascript】data属性とは？datasetで、取得、更新、追加する方法
data属性とは
data属性を要素に指定することにより、要素に補足情報を与えることができます。
<要素 data-*="値">〇〇〇</要素>
*は任意に設定することができます。
例）data-value, data-name
参考
【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する
取得
要素.dataset.data-value
<div class="el" data-value="true"></div> const el = document.querySelector(".el");
console.log(el.dataset.value);
// 結果 : true取得し、内容を書き換える
(1)をクリックしてみてください。
今日は晴れると思っていた。(1)、雨が降ってしまった。
<p>今日は晴れると思っていた。
<span class="conjunction" data-value="しかし">(1)</span>
、雨が降ってしまった。</p> document.querySelector(".conjunction").addEventListener("click", function(){
this.textContent = this.dataset.value;
});getAttributeを使う
getAttributeでも取得できます。お好みで。
<div class="el" data-value="true"></div> const el = document.querySelector(".el");
console.log(el.getAttribute("data-value"));
// 結果 : true更新
以下の記述で値を書き換えることができます。
要素.dataset.data-value =
"値"
<div class="el" data-value="true"></div> const el = document.querySelector(".el");
console.log(el.dataset.value = "false");以下のように、HTMLに変更が加えられました。
<div class="el" data-value="false"></div> 追加
以下は、data属性が設定されてない状態です。
<div class="test"></div>要素.dataset.name(任意) = "値"
ポイント : nameをキャメルケース で書くこと。
userNameA(キャメルケース)
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
<div
class="test"
data-name="name"
data-user-name-a="userNameA"
data-user-name-b="userNameB"
data-value="value">
</div>まとめ
-
取得 : 要素.dataset.
data-value -
更新 :
要素.dataset.
data-value = "値" - 追加 : 要素.dataset.name(任意) = "値"
