HTML5 data-* カスタム属性の詳細な説明

jQuery の attr と prop では、IE9 より前のバージョンでプロパティを不適切に使用するとメモリ リークが発生することが記載されています。また、HTML5 では、属性をカスタマイズするために data-* メソッドが追加されています。いわゆる data-* は、実際には data- プレフィックスとカスタム属性名を加えたものです。このような構造を使用してデータを保存できます。 data-* を使用すると、混乱を招き管理されていないカスタム属性の現在の状況を解決できます。

data-*の設定方法は2通りあり、HTML要素のタグ上に直接記述できます。

 <div id=test data-age=24> ここをクリック </div>

もちろん、data-age は JavaScript を通じて操作することもできます。これは、DOMStringMap 型のキーと値のペアのコレクションである dataset 属性を持ちます。

 var test = document.getElementById('test'); test.dataset.my = 'Byron';

これにより、data-my のカスタム属性が div に追加されます。JavaScript を使用してデータセットを操作する場合、注意すべき点が 2 つあります。

1. 属性を追加または読み取るときは、接頭辞 data-* を削除する必要があります。上記の例と同様に、test.dataset.data-my = 'Byron'; という形式は使用しません。

2. 属性名にハイフン (-) が含まれている場合は、キャメルケースの名前に変換する必要があります。ただし、CSS でセレクターが使用されている場合は、ハイフン形式を使用する必要があります。

今すぐコードにコンテンツを追加します

<style type=text/css> [data-birth-date] { 背景色: #0f0; マージン:20px;

 test.dataset.birthDate = '19890615';

このようにして、JavaScript を介して data-birth-date カスタム属性を設定し、CSS スタイル シートの div にいくつかのスタイルを追加して効果を確認しました。

読み取り時には、 . を使用して属性を取得する必要があり、ハイフンもキャメルケースの名前に変換する必要があります。

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.onclick = function () {alert(this.dataset.my + ' ') + this.dataset.age+' '+this.dataset.birthDate);

学生によっては、これと getAttribute/setAttribute に名前以外の違いがあるのか​​と尋ねるかもしれません。見てみましょう。

 var test = document.getElementById('test'); test.dataset.birthDate ('年齢', 25); コンソール。 log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age) //24 console.log(test.dataset.sex);

このことから、どちらも属性を属性に設定していることがわかります (ナンセンスです。そうでない場合はカスタム属性と呼ぶことができます)。つまり、getAttribute/setAttribute はすべてのデータセットのコンテンツに対して操作でき、データセットのコンテンツは属性のサブセットにすぎません。問題は名前ですが、データセットには data- プレフィックスを持つ属性のみがあります (age=25 のものはありません)。

では、なぜ依然として data-* を使用するのでしょうか? 最大の利点の 1 つは、すべてのカスタム属性をデータセット オブジェクト内で統一して管理できることです。これは、散在することなくすべてを走査するのに非常に便利であるため、引き続き使用するのが良いでしょう。

悪いニュースは、data-* のブラウザ互換性が非常に悲観的であることです。

1. Internet Explorer 11以降
2. クロム8+
3. Firefox 6.0以降
4. オペラ 11.10+
5. サファリ 6+

その中でも、IE11+ は私の友人たちの目を眩ませているだけで、この特性を完全に活用するにはまだまだ遠いようです。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。