すべての HTML 要素にカスタム データ属性を埋め込むにはどうすればよいでしょうか?

この記事では、すべての HTML 要素にカスタム データ属性を埋め込む必要があります。これを実現するには、HTML で data-* 属性を使用します。

HTML では、data-* 属性は、Web ページまたはアプリケーションのみにプライベートなデータをカスタマイズするために使用されます。この属性は、HTML 要素にカスタム値を追加します。

HTML の data-* 属性は 2 つの部分で構成されます -

• 属性値には任意の文字列を指定できます。

• 属性名には小文字のみを使用し、接頭辞「data-」の後に少なくとも 1 文字を含める必要があります。

このデータは、ユーザー エクスペリエンスを向上させるために JavaScript でよく使用されます。以下は、HTML 要素にカスタム データ属性を埋め込む例です。

例 1

この例では、

• カスタム data-id および data-price データを持つ 3 つの (衣料品)

をリストしました。

• ここでは、データ属性はユーザーには表示されません。

• これらの値はユーザーには表示されませんが、ドキュメント内には存在します。

リーリー

指定したカスタム プロパティを抽出しなかったため、これらの値は表示されません。

例 2

この例では、

• HTML テーブル内にタグを含む 4 つのリンクを作成しました。

• 各要素には、プレーヤー名を含むカスタム data-plyr-type 属性があります。

• onClick イベントを使用してカスタム プロパティを抽出しました。

• <a></a> 要素をクリックすると、JavaScript 関数がプレーヤーの国名を抽出して表示します。

リーリー

出力でわかるように、ユーザーがクリケット選手のテーブル データをクリックすると、カスタム属性が抽出され、特定の選手の国名が表示されます。

以上がすべての HTML 要素にカスタム データ属性を埋め込むにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。