データ屬性は、常にこの形式にあるため、 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-*屬性を使用すると、このターンオン/オフ機能と、同じ特異性レベルでその値に基づいて選択する機能を取得できます。

 / *プロパティが存在する場合、選択 */
[データサイズ] {}
/*屬性に特定の値があるかどうかを選択*/
[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"）;

しかし、データ屬性には獨自の特別な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にアクセスする必要がある場合があります。

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

?

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

仕様

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

ブラウザのサポート

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

デスクトップ

モバイル/タブレットPC