HTML データ プロパティ_html/css_WEB-ITnose

HTML タグは、データを保存および操作するためのカスタム属性を追加できます。ただし、そうすると、HTML 構文が HTML 仕様に準拠しなくなります。カスタム データ属性は HTML5 仕様に追加されており、「data-」で始まる任意の属性を HTML タグに追加することができます。これらの属性はページには表示されません。ページのレイアウトやスタイルには影響しませんが、読み取りと書き込みは可能です。次のコード スニペットは有効な HTML5 マークアップです:

<div id="item" data-id='123'>11111</div>

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

var myid= jQuery("#item").data('id');

「data-*」属性で json 構文を使用することもできます、

<div id="item" data-id='{"game":"on"}'></div>

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

var gameStatus= jQuery("#item").data('id').game;

.data(key,value) メソッドを通じて、「data-*」属性に値を直接割り当てることもできます。注意する必要がある重要な点の 1 つは、これらの「data-*」属性は、それが配置されている要素に関連付けられている必要があり、何かを保存するためのストレージ ツールとして使用しないことです。 「data-*」は HTML5 にのみ現れる属性ですが、jquery はユニバーサルであるため、HTML5 以外のページやブラウザでも .data(obj) メソッドを使用して「data-*」データを操作できます。