ページまたはアプリケーションのプライベート カスタム データを保存する html5 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>

ブラウザのサポート

IE、Firefox、Chrome、Safari、Opera

すべての主要なブラウザは data-* 属性をサポートしています。

定義と使用法

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

data-* 属性を使用すると、すべての HTML 要素にカスタム データ属性を埋め込むことができます。

保存された (カスタム) データは、ページの JavaScript 内で活用して、(Ajax 呼び出しやサーバー側のデータベース クエリを行わずに) より良いユーザー エクスペリエンスを作成できます。

data-* 属性には 2 つの部分が含まれます:

• 属性名には大文字が含まれていてはならず、プレフィックス「data-」の後に少なくとも 1 文字が必要です

• 属性値は任意の値にすることができます string

注: ユーザーエージェントは、「data-」という接頭辞が付いたカスタム属性を完全に無視します。

HTML 4.01 と HTML5 の違い

data-* 属性は HTML5 で新しく追加されました。

構文

<element data-*="somevalue">

属性値

value	説明
somevalue	属性の値を (文字列として) 指定します。

jQueryのattrとpropでは、IE9以前のバージョンではプロパティを不適切に使用するとメモリリークを引き起こすと記載されており、HTML5ではAttributeとPropertyの違いも追加されており、非常に厄介です。 * 属性をカスタマイズするメソッド。いわゆる data-* は、実際には data- プレフィックスとカスタマイズされた属性名を組み合わせたものです。この構造を使用してデータを保存できます。 data-* を使用すると、混乱を招き管理されていないカスタム属性の現在の状況を解決できます。

読み取りと書き込みのメソッド

data-*には、HTML要素タグに直接記述することができます

<div id="test" data-age="24">
        Click Here
    </div>

data-ageは、JavaScriptを使用して設定することもできます。操作するには、HTML5 の要素には DOMStringMap 型のキーと値のペアのコレクションである dataset 属性が必要です

この方法で、JavaScript を使用して div に data-my カスタム属性を追加します。 2 つのデータセット操作 注意事項

1. 属性を追加または読み取るときに、接頭辞 data-* を削除する必要があります。test.dataset.data-my = 'Byron'; という形式は使用しません。

2. 属性名にハイフン (-) が含まれている場合は、キャメルケースの名前に変換する必要があります。ただし、CSS でセレクターが使用されている場合は、ハイフン形式を使用する必要があります

。

以上がページまたはアプリケーションのプライベート カスタム データを保存する html5 data-* 属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。