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>
定義と使用法
属性は、ページまたはアプリケーション専用のdata-*カスタムデータを保存するために使用されます。
属性を使用data-*すると、すべてのHTML要素にカスタムデータ属性を埋め込むことができます。
保存された（カスタム）データをページのJavaScriptで使用して、より魅力的なユーザーエクスペリエンスを作成できます（Ajax呼び出しやサーバー側のデータベースクエリは不要です）。
data-*属性は2つの部分で構成されています。
- 属性名には大文字を含めることはできません。また、接頭辞「data-」の後に少なくとも1文字長くする必要があります。
- 属性値は任意の文字列にすることができます
注：接頭辞「data-」が付いたカスタム属性は、ユーザーエージェントによって完全に無視されます。
ブラウザのサポート
表の数字は、属性を完全にサポートする最初のブラウザーバージョンを示しています。
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
構文
<element data-*="somevalue">
属性値
| Value | Description |
|---|---|
| somevalue | Specifies the value of the attribute (as a string) |
関連ページ
HTMLチュートリアル：HTML属性
HTML DOMリファレンス：HTML DOM getAttribute（）メソッド