HTML5カスタムデータ属性の使用方法とその理由

HTML5カスタムデータ属性により、開発者はHTML要素にカスタムデータを保存できます。これらは、JavaScriptまたはCSSで使用できるHTML要素に追加情報を追加する方法を提供し、それによりWebページ機能を強化します。この記事では、データ属性が何であるか、どのようなデータ属性となっているのかを説明します。

キーポイント

• HTML5カスタムデータ属性により、開発者はJavaScriptまたはCSSがアクセスおよび使用できるHTML要素に関する追加情報を保存できるため、Webページ機能が強化されます。
• データ属性は常に「data-」で開始され、属性セレクターを介してCSSの要素をスタイリングするために使用でき、attr()関数を介してユーザーに情報を表示できます。
JavaScriptでは、データプロパティにアクセスできます。
• getAttribute()カスタムデータ属性は強力ですが、他の適切なHTML要素または属性がない場合にのみ使用する必要があり、大量のデータを保存するために使用しないでください。 setAttribute() dataset data()
なぜカスタムデータプロパティを使用するのですか？

さまざまなDOM要素に関連する情報を保存する必要があることがよくあります。この情報は読者にとって重要ではないかもしれませんが、それらに簡単にアクセスできると、開発の努力がはるかに容易になります。たとえば、Webページにさまざまなレストランをリストするとします。 HTML5の前に、レストランから提供される食べ物の種類や訪問者からの距離などの情報を保存する場合は、HTMLの

属性を使用します。また、ユーザーが訪問したい特定のレストランを表示するためにレストランIDを保存する必要がある場合はどうなりますか？ html属性に基づく方法に関するいくつかの質問を以下に示します：

HTMLclassプロパティは、そのようなデータを保存するために使用されません。その主な目的は、開発者が一連の要素にスタイル情報を割り当てることを許可することです。 class

メッセージを追加するたびに、要素に追加するには新しいクラスが必要です。これにより、必要な情報をさらに困難にするために、JavaScriptのデータを解析することができます。

• 指定されたクラス名が数で始まると仮定します。クラス名のデータに基づいて後で要素をスタイリングすることにした場合は、数字を逃れるか、スタイルシートの属性セレクターを使用する必要があります。 class
これらの問題を解決するために、HTML5はカスタムデータプロパティを導入します。名前から始まる名前のすべての要素属性は、データ属性です。これらのデータ属性を使用して要素をスタイリングすることもできます。次に、データプロパティの基本を掘り下げて、CSSとJavaScriptの値にアクセスする方法を学びましょう。
• html構文

前述のように、データ属性の名前は常に

で開始されます。例は次のとおりです。data-

<code class="language-html"><li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li></code>

これらのデータ属性を使用して、訪問者のレストランを検索およびソートできるようになりました。たとえば、すべてのベジタリアンレストランを特定の距離以内に表示できるようになりました。 data-プレフィックスに加えて、有効なカスタムデータ属性の名前には、文字、数字、ハイフン（ - ）、ドット（。）、コロン（:)、またはアンダースコア（_）のみを含めることができます。大文字を含めることはできません。データプロパティを使用する場合、2つのことに注意を払う必要があります。まず、これらのプロパティに保存されているデータは、文字列型でなければなりません。文字列でエンコードできるコンテンツは、データプロパティにも保存できます。すべてのタイプ変換はJavaScriptで実行する必要があります。第二に、他の適切なHTML要素または属性がない場合にのみ、データ属性を使用する必要があります。たとえば、要素のクラスをdata-class属性に保存することは不適切です。要素には、任意の数のデータ属性と必要な値を持つことができます。

データ属性とcss

属性セレクターを使用して、データ属性を使用してCSSの要素をスタイリングできます。また、関数を使用して、データプロパティに保存されている情報をユーザーに表示することもできます（ツールチップまたはその他の方法）。 attr()

要素スタイルを設定します

レストランの例に戻ると、プロパティセレクターを使用してレストランの背景をさまざまな方法で設定し、ユーザーにユーザーからの距離をユーザーに促します。例は次のとおりです。

<code class="language-css">li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}</code>

ツールチップの作成

ツールチップを使用して、ユーザーに要素に関連する追加情報を表示できます。少なくともCSSのみのツールチップに完全にアクセスできないため、この方法をWebサイトを作成するのではなく、迅速なプロトタイピングに使用することをお勧めします。表示したい情報は、

属性に保存できます。 data-tooltip

<code class="language-html"><span data-tooltip="简单的解释">Word</span></code>

::before

<code class="language-css">span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}</code>

javaScriptを使用してデータ属性にアクセス

JavaScriptにデータプロパティにアクセスするには、3つの方法があります。

および

getAttributeを使用します setAttribute javaScriptの

および

を使用して、異なるデータ属性の値を取得して設定できます。指定されたプロパティが存在しない場合、getAttribute()メソッドはsetAttribute()または空の文字列を返します。これらの方法の使用方法の例は次のとおりです。 getAttribute null

メソッドを使用して、既存のプロパティの値を変更したり、新しいプロパティを追加したりできます。

<code class="language-javascript">let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");</code>

setAttribute

プロパティを使用

<code class="language-javascript">restaurant.setAttribute("data-owner-name", "someName");</code>

を使用します

データプロパティにアクセスするより簡単な方法は、datasetプロパティを使用することです。このプロパティは、各カスタムデータプロパティのエントリを含む

オブジェクトを返します。

属性を使用するときに注意する必要があることがいくつかあります。カスタムデータ属性をdatasetキーに変換するには3つの手順が必要です：DOMStringMap

• 属性名data-
から
• プレフィックスを削除します
ハイフンを削除し、その後の名前から小文字を削除し、次の文字を大文字に変換します
他のキャラクターは同じままです。これは、ハイフンとそれに続く小文字も同じままであることを意味します。

element.dataset.keynameプロパティは、オブジェクトに保存されているラクダ名をキーとしてelement.dataset[keyname]などのキーとして使用してアクセスできます。プロパティにアクセスするもう1つの方法は、

などの正方形のブラケット表記を使用することです。次のHTMLを検討してください：

<code class="language-html"><li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li></code>

以下にいくつかの例があります：

<code class="language-css">li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}</code>

このメソッドはすべての主要なブラウザでサポートされているため、まず使用してカスタムデータプロパティにアクセスする必要があります。

jquery

を使用します data() jQueryの

メソッドを使用して、要素のデータプロパティにアクセスすることもできます。 jQueryバージョン1.6の前に、次のコードを使用してデータプロパティにアクセスする必要があります。

<code class="language-html"><span data-tooltip="简单的解释">Word</span></code>

バージョン1.6から始めて、jQueryはデータプロパティのキャメルバージョンの使用を開始します。これで、次のコードでも同じことができます。

<code class="language-css">span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}</code>

jQueryは、データプロパティから得られた文字列を数字、ブール人、オブジェクト、アレイ、

などの適切なタイプに内部的に変換しようとすることを知っておく必要があります。 null

<code class="language-javascript">let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");</code>

jQueryに、別のタイプに変換しようとすることなく、jqueryにデータ属性から取得して文字列として取得したい場合は、jqueryの

メソッドを使用する必要があります。 jQueryは、データ属性が初めてアクセスされた場合にのみ、その値を取得します。その後、データプロパティにアクセスしたり変更されたりしなくなります。これらのプロパティに対して行うすべての変更は内部で作成され、jQueryでのみアクセスできます。次のリスト項目のデータ属性を操作しているとします。 attr()

次のコードを使用して、

<code class="language-javascript">restaurant.setAttribute("data-owner-name", "someName");</code>

属性の値を変更できます。

ご覧のとおり、Native JavaScript（非jquery）を使用してdata-distance属性の値にアクセスすると、古い結果が得られます。

<code class="language-html"><li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">Salad King</li></code>

結論data-distance

このチュートリアルでは、HTML5データプロパティに関するすべての重要なことをカバーしています。属性セレクターを使用してツールチップとスタイル要素を作成することに加えて、データプロパティを使用して、未読メッセージに関する通知など、他のデータをユーザーに保存および表示することもできます。

（FAQセクションをここに追加する必要があります。コンテンツは入力テキストのFAQパーツと一致していますが、言語式はより洗練されます。複製を避けるために、この部分を省略します。

以上がHTML5カスタムデータ属性の使用方法とその理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。