HTML data-* 属性

定義と使用法

data-* 属性は、ページやアプリケーションのプライベートなカスタムデータを保存するために使用されます。

data-* 属性は、すべてのHTML要素にカスタムdata属性を埋め込む能力を私たちに与えます。

保存された（カスタム）データは、ページのJavaScriptで利用され、より良いユーザーエクスペリエンスを提供できます（Ajax呼び出しやサーバーサイドデータベースクエリは行いません）。

data-* 属性は2つの部分で構成されています：

  • 属性名は大文字を含まないべきで、「data-」接頭辞の後に少なくとも1文字必要です
  • 属性値は任意の文字列でできます

注意：ユーザーエージェントは「data-」接頭辞を持つカスタム属性を完全に無視します。

もっと詳しく：

HTML 説明書：HTML 属性

HTML DOM リファレンスマニュアル：HTML DOM getAttribute() メソッド

例

使用 data-* 属性でカスタムデータを埋め込む：

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li>
  <li data-animal-type="蜘蛛">蝇虎</li>
</ul>

実際に試してみる

语法

<element data-*="somevalue">

属性値

値 描述
somevalue 规定属性的值（以字符串）。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6