HTMLでカスタム属性を使用する方法

HTMLでは、カスタム属性を作成できます。次に、CSSを使用してスタイルを設定したり、JavaScriptを使用してこれらの属性の動作を制御したりできます。

カスタム属性は好きなように呼び出すことができますが、カスタム属性名の前にはdata-を付ける必要があります。 ラベル：

<tag data-custom-attribute-name="value">Content</tag>

たとえば、「Apple」という食品要素があるとします。 。ユーザーがクリックすると、タイプを表示します。 ポップアップダイアログボックスに表示されます。

そのために、food-typeというカスタム属性を作成します （data-を覚えておいてください ラベル）そしてそれを<div>に追加します Appleを持つ要素 内部のテキスト：

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

そして、この機能を機能させるJavaScript：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

これがデモです。

HTMLコードの仕組み：

• 最初に、onclickを追加しました <div>の属性 エレメント。これは、リッスンするイベントリスナーをアタッチするイベント属性です...ご想像のとおり、クリックします！
• 次に、showDetailsBox(this)の属性値を割り当てます。 onclickに移動します 属性。
• showDetailsBox() Appleのテキスト要素をクリックするとすぐに呼び出されるJavaScript関数の名前です。
• this (this)の一部 が属するオブジェクトを参照する引数です（ this 初心者には少し進んでいますが、理解していなくても大丈夫です。
• id HTML要素の一意のIDを指定するために使用される組み込みのHTML属性です。この場合、一意のIDはappleです。 。

JavaScriptコード 作品はこのHTMLチュートリアルの範囲を超えているため、簡単に説明します。

showDetailsBox()の場合 関数はonclickによって呼び出されます イベント属性、コードブロック{ ... }を実行します 内容：

function showDetailsBox(food) {
  ...
}

コードブロック内の最初の行で、JavaScriptはカスタムdata-food-typeを持つ任意のHTML要素を選択します 属性を作成し、それ（およびその属性値）をfoodTypeという変数に割り当てます。 ：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

2行目では、組み込みのalert()を実行します。 メソッド（ポップアップダイアログボックスを表示し、foodTypeの値を表示するように指示します もちろん、これはfruit ：

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

上記のコード例全体を完全に理解していなくても心配しないでください。特に初心者にとっては、消化することがたくさんあります。練習すれば、それは理にかなっています！

HTML属性の詳細については、MDNWebドキュメントのHTML属性リファレンスを調べることをお勧めします。

重要： 支援のため、データ属性内に表示およびアクセスできる重要なコンテンツを保存しないでください。 テクノロジーがそれらにアクセスしないことがあります。クローラーを検索する可能性があります また、データ属性値のインデックスを作成しないため、重要なSEOコンテンツをここに配置しないでください。