なぜカスタムデータ属性を使用できますか？
多くの場合、我々は別のDOM要素に関連付けられた情報を保存する必要があります。読者が不可欠ではないかもしれないが、簡単にアクセスできるが、開発者のための私たちの生活が楽になりますのためにこの情報があります。
たとえば、あなたがページ上の別のレストランのリストがあるとします。あなたが訪問者に関するレストランや店舗情報が提供する食品の種類の間の距離に関する情報が必要な場合はHTML5前に、あなたはHTMLを使用する必要がある class属性を。あなたがレストランを格納する必要がある場合id、ユーザがレストランにアクセスすることを望んでいるかを確認するために、どのようにしますか？
これは、問題のHTMLのclass属性の数に基づいた方法です。
- HTMLクラス属性は、このようなデータが格納されていることを意味するものではありません。その主な目的は、開発者が一連の要素にスタイル情報を割り当てることができるようにすることです。
- 情報の各追加作品は、私たちは、要素に新しいクラスを追加する必要があります。これは実際に私たちがより困難になるために必要なものを得るために、データ解析JavaScriptを行います。
- あなたは番号のクラス名を与えられていると仮定します。あなたは、データ要素のクラス名に応じてスタイリングすることが後で決定した場合、あなたは数をエスケープするか、スタイルシートの属性セレクタを使用する必要があります。
これらの問題を取り除くために、HTML5を紹介カスタムデータ属性を。先頭に要素上のすべてのプロパティへの名前data-のすべてのデータの属性。また、スタイルの要素にこれらのデータ属性を使用することができます。
次に、のは、データ属性の基本を理解し、CSSとJavaScriptでその値にアクセスする方法を学びましょう。
HTML構文
前述したように、データの名前は、常にで始まる属性data-。これは一例です：
<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span> <span style="color:#669900">data-type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>veg<span style="color:#999999">"</span></span> <span style="color:#669900">data-distance</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>2miles<span style="color:#999999">"</span></span> <span style="color:#669900">data-identifier</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>10318<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
Salad King
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span></code></span>あなたは今、これらのデータは、観光客やソートのためのレストランを検索するために属性を使用することができます。たとえば、あなたは今、それらの一定の距離内にあるすべてのベジタリアンレストランを表示することができます。
他のdata-プレフィックスよりも、効果的なカスタムデータは、文字だけを属性数字、ハイフン（ - ）（。）、ポイント、コロン（:)またはアンダースコア（_）。これは、大文字を含めることはできません。
データ属性を使用するときは、心の中で二つのことを負担する必要があります。
まず、これらのプロパティに格納されたデータは文字列型でなければなりません。エンコードされた文字列にすることができ、任意のコンテンツは、データ属性に格納することができます。すべての型変換ではJavaScriptを使用する必要があります。
その後、あれば他の適切なHTML要素や属性を使用してはならない場合にのみ、データを属性。例えば、記憶素子には適していないclassで data-class特性。
要素は、データ属性の任意の数、任意の所望の値を有していてもよいです。
フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
データ属性とCSS
あなたは、スタイル要素にCSS属性セレクタで使用されるデータの属性を使用することができます。また、この使用することができますattr()機能（ツールチップまたはその他）は、ユーザへのデータ属性に格納されている情報を表示します。
デザイン要素
当ホテルのレストランの例に戻って、あなたには、レストラン、レストランのユーザタイプや距離を促すため、異なる背景レストランのヒントを提供するために、属性セレクタを使用することができます。これは一例です：
<span style="color:#000000"><code class="language-css"><span style="color:#669900">li[data-type='veg']</span> <span style="color:#999999">{</span>
<span style="color:#990055">background</span><span style="color:#999999">:</span> #8BC34A<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
<span style="color:#669900">li[data-type='french']</span> <span style="color:#999999">{</span>
<span style="color:#990055">background</span><span style="color:#999999">:</span> #3F51B5<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>
作成ツールのヒント
あなたは、要素に関連する他のいくつかの情報がユーザーに表示されるツールチップを使用することができます。
私はあなたがラピッドプロトタイピングのための、およびないので、特に重要である生産拠点、この方法を使用することをお勧めします純粋なCSSのツールチップにはない完全なアクセス。
あなたはに保存することができる情報を表示するdata-tooltipプロパティ。
<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>span</span> <span style="color:#669900">data-tooltip</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>A simple explanation<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Word<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>span</span><span style="color:#999999">></span></span></code></span>その後、使用することができる::before擬似要素データがユーザに提示されます。
<span style="color:#000000"><code class="language-css"><span style="color:#669900">span::before</span> <span style="color:#999999">{</span>
<span style="color:#990055">content</span><span style="color:#999999">:</span> <span style="color:#dd4a68">attr</span><span style="color:#999999">(</span>data-tooltip<span style="color:#999999">)</span><span style="color:#999999">;</span>
// More Style Rules
<span style="color:#999999">}</span>
<span style="color:#669900">span:hover::before</span> <span style="color:#999999">{</span>
<span style="color:#990055">display</span><span style="color:#999999">:</span> inline-block<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>アクセスデータ属性にJavaScriptを使用
JavaScriptでデータの属性にアクセスするための3つの方法があります。
使用のgetAttributeとsetAttributeメソッド
あなたはJavaScriptを使用して、できるgetAttribute()とsetAttribute()異なるデータ属性の値を取得して設定します。
指定された属性が存在しない場合、getAttributeメソッドの戻りnullまたは空の文字列。これは、これらのメソッドを使用しての例です。
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> ratings <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">getAttribute</span><span style="color:#999999">(</span><span style="color:#669900">"data-ratings"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>あなたは、この使用することができsetAttribute、既存のプロパティの値を変更したり、新しいプロパティを追加する方法を。
<span style="color:#000000"><code class="language-javascript">restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">setAttribute</span><span style="color:#999999">(</span><span style="color:#669900">"data-owner-name"</span><span style="color:#999999">,</span> <span style="color:#669900">"someName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>データセットのプロパティを使用します
ヘルププロパティは、データ属性にアクセスするための簡単な方法ですdataset。このプロパティは、返すDOMStringMapの各属性は、カスタム・データ・エントリを有し、オブジェクトを。
この使用してdataset属性を、あなたは心の中でいくつかの注意点を維持する必要があります。
3つのステップにカスタムデータプロパティDOMStringMapキー：
data-プレフィックスは、属性名から削除されます- すべての名前は、ハイフンと文字に続く文字を小文字大文字に変換削除
- その他の文字は変更されません。小文字を持つ任意ハイフンなしで変わらないことをこれが意味。
キャメルケースは、次いでアクセスプロパティの鍵（例えば）などのオブジェクトに格納された名前を使用することができますelement.dataset.keyname。
別の方法は、例えば、アクセス属性ブラケット表記法を使用することです element.dataset[keyname]
次のHTMLを考えてみます。
<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span> <span style="color:#669900">data-type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>veg<span style="color:#999999">"</span></span> <span style="color:#669900">data-distance</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>2miles<span style="color:#999999">"</span></span> <span style="color:#669900">data-identifier</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>10318<span style="color:#999999">"</span></span> <span style="color:#669900">data-owner-name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>someName<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
Salad King
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span></code></span>ここではいくつかの例を示します。
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> ratings <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>ratings<span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>ratings <span style="color:#a67f59">=</span> newRating<span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">[</span><span style="color:#669900">'ownerName'</span><span style="color:#999999">]</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">[</span><span style="color:#669900">'ownerName'</span><span style="color:#999999">]</span> <span style="color:#a67f59">=</span> <span style="color:#669900">'newOwner'</span><span style="color:#999999">;</span></code></span>今、すべての主要なブラウザがサポートして、この方法を、そしてあなたがする必要があり、以前の方法よりも、それを好むアクセスカスタムデータ属性に。フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
jQueryのを使用して
また、jQueryのを使用することができる data()要素法のデータ属性にアクセスすること。jQueryの1.6バージョンには、事前にデータの属性にアクセスするには、次のコードを使用する必要があります。
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"owner-name"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"owner-name"</span><span style="color:#999999">,</span> <span style="color:#669900">"newName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>バージョン1.6以降では、jQueryのは、データ属性のキャメルケースのバージョンを使用して開始します。今、あなたは、次のコードを使用して同じ操作を行うことができます。
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"ownerName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"ownerName"</span><span style="color:#999999">,</span> <span style="color:#669900">"newName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>あなたはjQueryのは、このような数値、ブール値、オブジェクト、配列、およびnullのような適切な型に変換されたデータから文字列プロパティの内側に取得しようとしていることを知っている必要があります。
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> identifier <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"identifier"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> identifier<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// number</span></code></span>希望jQueryのは、jQueryのSHOULD使用して、別の型に変換しようとせずに文字列としてプロパティ値を取得した場合attr()の方法を。
jQueryのそれらの値は、ときにのみ、データを取得するプロパティの最初の訪問を。この排除は、データ属性にアクセスしたり変更。あなたはこれらの属性に加えた変更は、社内で行われ、そして唯一のjQueryにアクセスすることができます。
あなたは、以下の項目のリストにデータ属性を操作していると仮定します。
<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>salad<span style="color:#999999">"</span></span> <span style="color:#669900">data-type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>veg<span style="color:#999999">"</span></span> <span style="color:#669900">data-distance</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>2miles<span style="color:#999999">"</span></span> <span style="color:#669900">data-identifier</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>10318<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
Salad King
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span></code></span>あなたは、変更するには、次のコードを使用することができますdata-distanceプロパティの値を：
<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> distance <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"distance"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>distance<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// "2miles"</span>
<span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"distance"</span><span style="color:#999999">,</span><span style="color:#669900">"1.5miles"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>distance<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// "1.5miles"</span>
<span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>distance<span style="color:#999999">;</span>
<span style="color:#708090">// "2miles"</span></code></span>あなたが見ることができるように、data-distanceプロパティの値にアクセスするために（というよりもjQueryの）共通JavaScriptを使用して、常に私たちのために、古い結果を提供します。
結論
このチュートリアルでは、私は、HTML5データに関するすべての重要なコンテンツは、あなたが知っている必要があります属性を導入しました。ツールチップの作成に加えてとスタイル要素は、属性セレクタを使用しますが、ストアにデータプロパティを使用して、このような未読メッセージの通知として、ユーザーに他のデータを表示することができます。
