最新のWeb開発のチュートリアル
 

HTML data-* Attribute


定義と使用法

data-*属性は、ページまたはアプリケーションへの専用カスタムデータを格納するために使用されます。

data-*属性私たちのすべてのHTML要素のカスタムデータ属性を埋め込む機能を提供します。

保存されている(カスタム)のデータは、その後、(任意のAjaxの呼び出しやサーバ側のデータベースクエリなし)、より魅力的なユーザーエクスペリエンスを作成するには、ページのJavaScriptで使用することができます。

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

  1. 属性名は任意の大文字を含むべきではない、と長い接頭辞の後に、少なくとも1文字でなければなりません"data-"
  2. 属性値は任意の文字列を使用できます

注:接頭辞カスタム属性"data-"完全にユーザエージェントによって無視されます。


に適用されます

contextmenu属性は、の一部であるグローバル属性 、および任意のHTML要素で使用することができます。

素子 属性
すべてのHTML要素 data-*

使用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-* 4.0 5.5 2.0 3.1 9.6