![見出し画像](https://assets.st-note.com/production/uploads/images/44785581/rectangle_large_type_2_7277e70981cf2c8e12c5ddd5e6580342.jpeg?width=1200)
Photo by
mericanadesico
カスタムデータ属性
カスタムデータ属性とは、data属性を任意に付与することができる属性のこと
HTMLコード
<button>和英</button>
<h1 id="target" data-hoge="Thank you">ありがとう</h1>
JSコード
document.querySelector("button").addEventListener("click", () =>{
const targetNode = document.getElementById("target");
targetNode.textContent = targetNode.dataset.hoge;
});
*data-hoge ⇒ dataset.hoge へ変更する
ボタンを押すと英語表記へ変わる
この記事が気に入ったらサポートをしてみませんか?