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()メソッド