「背景色は黒」の表示効果を実現するには、テキストは白で、テキストは中央揃えです」という場合は、次の CSS を定義します:


次に、以下のjsを渡します。方法は、動的にCSS定義を追加し、divの表示スタイルを変更することです。ページがロードされるときの data-chb 属性:


最終ページの表示効果は以下の通りです:

人々は常に、HTML タグにカスタム属性を追加してデータを保存および操作することを好みます。ただし、これを行う場合の問題は、将来他のスクリプトがカスタム属性をリセットするかどうかがわからないことです。また、これを行うと、HTML 構文も Html 仕様に準拠しなくなります。他の副作用として。そのため、カスタム データ属性が HTML5 仕様に追加され、それを使用して多くの便利なことができるようになりました。

HTML5の詳細な仕様は読んでいただくとして、このカスタムデータ属性の使い方は非常に簡単で、HTMLタグに「data-」で始まる任意の属性を追加することができます。は表示されませんが、ページのレイアウトやスタイルには影響しませんが、読み取りと書き込みは可能です。
次のコード スニペットは有効な HTML5 マークアップです:

このデータの読み方 Woolen布？もちろん、ページ要素を反復処理して必要なプロパティを読み取ることもできますが、jQuery にはこれらのプロパティを操作するための組み込みメソッドがすでに組み込まれています。これらの「data-*」プロパティにアクセスするには、jQuery の .data() メソッドを使用します。メソッドの 1 つは .data(obj) です。このメソッドは、対応するデータ属性を返すことができます。
たとえば、次の書き込みメソッドを使用して data-myid 属性値を読み取ることができます:


console.log(myid);たとえば、次の HTML を記述する場合、「data-*」属性で json 構文を使用することもできます:


js を通じてこのデータに直接アクセスでき、json のキー値を通じて、対応する値を取得できます:

console.log (gameStatus); .data(key,value) メソッドを使用して、「data-*」属性に値を直接割り当てることもできます。注意する必要がある重要な点は、これらの「data-*」属性は、その属性が含まれる要素に関連付けられている必要があり、何かを保存するためのストレージ ツールとして使用しないことです。

翻訳者の補足: 「data-*」は HTML5 でのみ使用される属性ですが、jquery は汎用であるため、HTML5 以外のページやブラウザー (obj) メソッドでも .data を使用できます。 「data-*」データを操作します。