HTMLデータ属性ガイド

目次

1. 導入
2. 文法
3. データ属性を使用したスタイル
4. JavaScriptのデータプロパティへのアクセス

導入

HTML要素には、アクセシビリティ情報からスタイル制御まで、あらゆる目的で使用される属性を持つことができます。

<div aria-label="Names" role="region"></div>

継承されていないアプローチは、独自のプロパティを作成するか、無関係な機能のために既存のプロパティを再利用することです。

<div highlight="true"></div>
<div width="large"></div>

これを行うには多くの悪い理由があります。あなたのHTMLは無効になり、実際の悪影響はないかもしれませんが、効果的なHTMLの暖かくて曖昧な感覚を失います。最も説得力のある理由は、HTMLが進化する言語であり、今日機能しないプロパティと価値が将来機能しないという意味ではないという理由だけです。

良いニュースは、独自のプロパティを作成できることです。あなたはそれらをdata-*そしてあなたはあなたが望むことを何でもすることができます！

文法

独自のHTML属性を作成し、独自の情報を入力できるようにすることは非常に便利です。幸いなことに、あなたはそれをすることができます！これは、データ属性が使用されるものです。彼らはこのように見えます：

<div data-foo=""></div>
<div data-size="large"></div>

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

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

<div data=""></div>

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

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

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

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

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

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

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

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

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

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

属性セレクターの特異性

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

インラインスタイル、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 id="スタイル使用の例">スタイル使用の例</h4>
<p>データ属性を使用して、グリッドコンテナに必要な列の数を指定できます。</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"）;
//値を設定することもできます。
// data-state = "collapsed"を返す
el.setattribute（ "data-state"、 "collapsed"）;

しかし、データ属性には独自の特別なAPIもあります。複数のデータ属性を持つ要素があるとします（これは絶対に問題ありません）：

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

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

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

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

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

データプロパティの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に入力できることです。これは、特定の操作を実行するためにJavaScriptにアクセスする必要がある場合があります。

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

♡

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

仕様

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

ブラウザのサポート

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

デスクトップ

モバイル/タブレットPC