HTMLデータ-*属性
定義と使用法
この
data-*属性は、ページまたはアプリケーション専用のカスタムデータを保存するために使用されます。
この
data-*属性を使用すると、すべてのHTML要素にカスタムデータ属性を埋め込むことができます。
保存された（カスタム）データをページのJavaScriptで使用して、より魅力的なユーザーエクスペリエンスを作成できます（Ajax呼び出しやサーバー側のデータベースクエリは不要です）。
data-*属性は2つの部分で構成されています。
- 属性名には大文字を含めることはできません。また、接頭辞「data-」の後に少なくとも1文字長くする必要があります。
- 属性値は任意の文字列にすることができます
注：接頭辞「data-」が付いたカスタム属性は、ユーザーエージェントによって完全に無視されます。
に適用されます
data-*属性はグローバル属性であり、任意のHTML要素で使用できます。
| エレメント | 属性 |
|---|---|
| すべてのHTML要素 | データ-* |
例
例
data- *属性を使用して、カスタムデータを埋め込みます。
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
ブラウザのサポート
表の数字は、属性を完全にサポートする最初のブラウザーバージョンを示しています。
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |