データ屬性は、常にこの形式にあるため、 data-*屬性と呼ばれることがよくあります。 data言葉、そしてダッシュ- 、そしてあなたが考えることができる他のテキスト。

データ屬性だけを使用できますか？

<div data=""></div>

これは害を引き起こすことはないかもしれませんが、このガイドでカバーするJavaScript APIを取得することはできません。紹介で述べたように、あなたは実際に自分の屬性を作成しています。

データ屬性で何をすべきではありませんか

アクセス可能なコンテンツを保存します。コンテンツをページに表示または読み取る必要がある場合は、データプロパティに配置するだけでなく、コンテンツがHTMLコンテンツのどこかにあることを確認(rèn)してください。

<div data-name="Chris Coyier"></div>
<div>
  クリス?コイヤー
</div>

隠されたコンテンツに関する詳細(xì)情報を以下に示します。

データ屬性を使用したスタイル

CSSは、屬性とその値に基づいてHTML要素を選択できます。

 /*このデータ屬性と値を持つ要素を選択します*/
[data-size = "large"] {
  パディング：2レム;
  フォントサイズ：125％;
}
/*要素やクラスなどに制限できます*/
button [data-type = "download"] {}
.card [data-pad = "extra"] {}

これは魅力的です。 HTML/CSSのメインスタイルのフックはクラスであり、クラスは優(yōu)れていますが（中程度の特異性とclassListを介した素敵なJavaScriptメソッドがあります）、要素はそれを持っているか、それを持っていない（基本的にオンまたはオフ）。 data-*屬性を使用すると、このターンオン/オフ機(jī)能と、同じ特異性レベルでその値に基づいて選択する機(jī)能を取得できます。

 / *プロパティが存在する場合、選択 */
[データサイズ] {}
/*屬性に特定の値があるかどうかを選択*/
[data-state = "open"]、
[aria-expanded = "true"] {}
/ *「開始...」セレクター。これは「3」または「3.14」などの3で始まる3つの文字に一致することを意味します */
[data-version^= "3"] {}
/ * "include" valueがどこでも文字列が含まれている場合 */
[データ - コンパニー*= "Google"] {}

屬性セレクターの特異性

クラスとまったく同じです。通常、特異性は4部構(gòu)成の値と見なします。

インラインスタイル、ID、クラス/プロパティ、タグ

したがって、個々のプロパティセレクターは0、0、1、0です。このようなセレクター：

 div.card [data-foo = "bar"] {}

0、0、2、1になります。 2は、クラス（ .card ）とプロパティ（ [data-foo="bar"] ）があり、1はタグ（ div ）があるためです。

屬性セレクターの特異性は、IDよりも低く、要素/タグよりも高く、クラスと同じです。

癥例と感受性のプロパティ値

データプロパティの可能性のあるケースの矛盾を修正する必要がある場合、プロパティセレクターはこのためにケースに依存しないバリアントを提供します。

 /*一致します<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state = "open" i] {}

正方形のブラケットセレクターの小文字iです。

使用データのプロパティを視覚化します

CSSを使用すると、データ屬性の値を抽出し、必要に応じて表示できます。

 /*<div data-emoji="?"> */
[data-emoji] ::前{
  コンテンツ：attr（data-emoji）; / * return '?' */
  マージン右：5px;
}<h4>スタイル使用の例</h4>
<p>データ屬性を使用して、グリッドコンテナに必要な列の數(shù)を指定できます。</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

JavaScriptのデータプロパティへのアクセス

他の屬性と同様に、Common Method getAttribute使用して値にアクセスできます。

 let value = el.getattribute（ "data-state"）;
//値を設(shè)定することもできます。
// data-state = "collapsed"を返す
el.setattribute（ "data-state"、 "collapsed"）;

しかし、データ屬性には獨(dú)自の特別なAPIもあります。複數(shù)のデータ屬性を持つ要素があるとします（これは絶対に問題ありません）：

要素に參照がある場合、次のようなプロパティを設(shè)定して取得できます。

 // span.dataset.infoを取得します。 // 123
span.dataset.index; // 2
// span.dataset.prefix = "mr."を設(shè)定します。
span.dataset.emojiicon = "？";

最後の行のラクダの命名法に注意してください。 HTMLのKebabスタイルの屬性（ data-this-little-piggyなど）をJavaScript（ dataThisLittlePiggyなど）のCamel命名法に自動的に変換します。

このAPIは間違いなくclassListほど良くありません。クラスリストclassList 、追加、削除、切り替え、交換の明確な方法がありますが、何よりも優(yōu)れています。

インラインデータセットにアクセスすることもできます。

データプロパティのJSONデータ

なぜだめですか？これは、有効なJSONにフォーマットできる文字列です（引用符などに注意してください）。データを抽出し、必要に応じて解析できます。

 const el = document.queryselector（ "li"）;
let json = el.dataset.person;
let data = json.parse（json）;
console.log（data.name）; // Chris Coyier
console.log（data.job）; // webパーソン

JavaScriptユースケース

概念は、データプロパティを使用して情報をHTMLに入力できることです。これは、特定の操作を?qū)g行するためにJavaScriptにアクセスする必要がある場合があります。

一般的な例は、データベース機(jī)能に関連しています。 「いいね」ボタンがあるとします。

?

このボタンは、クリックしたときにサーバーにAjax要求を?qū)g行するハンドラーをクリックできます。データプロパティから取得するため、どのレコードを更新するかを知っています。

仕様

• セレクターレベル4（ワーキングドラフト）
• セレクターレベル3（推奨）
• セレクターレベル2、リビジョン1（初期定義）

ブラウザのサポート

このブラウザは、Caniuseのデータをサポートしています。これには詳細(xì)が含まれています。番號は、このバージョンでブラウザがこの機(jī)能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC