カスタムデータ 属性 （HTMLグローバル属性）

HTMLのカスタムデータ属性の説明です。カスタムデータ属性は、WebページまたはWebアプリ用に独自データを格納できる属性です。

---

目次

1. 属性の記述例
   • 閲覧中ブラウザーでの表示結果
2. 属性の説明
3. 利用可能な属性値

属性の記述例

<div id="blog" data-author="太郎" data-update-at="2017-01-25">
  <p>著者 : <span id="author"></span></p>
  <p>日付 : <span id="date"></span></p>
</div>

const blog = document.getElementById("blog");
document.getElementById("author").innerHTML = blog.dataset.author;
document.getElementById("date").innerHTML   = blog.dataset.updateAt;

 

閲覧中ブラウザーでの表示結果

 

属性の説明

• カスタムデータ属性は、WebページまたはWebアプリ用に独自データを格納できる属性です。
• カスタムデータ属性は、グローバル属性であるため、すべての要素で利用することができます。
• カスタムデータ属性の属性名は、data-ではじまり、ハイフン（-）の後に少なくとも1文字以上が続きます。続く文字に大文字は利用できません。
• 格納されたデータは、JavaScriptから値を取得し利用することが可能です。

 

利用可能な属性値

属性値	属性値の説明
任意の文字列	格納したい独自データ文字列