data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析-H5 チュートリアル-php.cn

data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析

青灯夜游

リリース： 2020-11-13 17:49:51

転載

2400 人が閲覧しました

data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析

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

読み取りと書き込みのメソッド

data-*設定方法は 2 つあり、HTML 要素のタグに直接記述することができます

<div>
        Click Here
    </div>

ログイン後にコピー

data-age はカスタム属性です。もちろん、JavaScript を通じて操作することもできます。HTML5 の要素には、DOMStringMap タイプのキーと値のペアのコレクションである dataset 属性があります。

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

ログイン後にコピー

このようにして、data-my がp JavaScript を使用してカスタム属性のデータセットを操作する場合、注意する必要があることが 2 つあります。

1. 属性を追加または読み取るときに、プレフィックス data-* を削除する必要があります。上記の例と同様に、 test.dataset.data-my = 'Byron'; をフォームでは使用しないでください。

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

先ほどと同じように、コードはコンテンツを追加します

<style>
        [data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }
    </style>

ログイン後にコピー

test.dataset.birthDate = '19890615';

ログイン後にコピー

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

data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析

読み取りの際も、データセットオブジェクトを通じて、「.」を使用して属性を取得します。ハイフンはキャメルケースに変換する必要があります。

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

ログイン後にコピー

data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析

getAttribute/setAttribute

一部の生徒は、これに違いがあるのかと尋ねるかもしれません。見てみましょう

var test = document.getElementById('test');
        test.dataset.birthDate = '19890615';
        test.setAttribute('age', 25);
        test.setAttribute('data-sex', 'male');

        console.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); //male

ログイン後にコピー

data-* を使用した HTML5 の属性のカスタマイズに関する簡単な分析

このようにして、どちらも属性を属性に設定していることがわかります。 (ナンセンスです。そうでない場合はカスタム属性と呼ぶことができます)、つまり getAttribute/setAttribute すべてのデータセットの内容を操作できます。データセットの内容は属性のサブセットにすぎません。特別なのは名前付けです。ただし、属性だけが存在します。データセット内の data- プレフィックス (age=25 のものはありません)。

それでは、なぜ依然として data-* を使用するのでしょうか? 最大の利点の 1 つは、すべてのカスタム属性をデータセットオブジェクト内で統一された方法で管理できることです。ゼロにならずにすべてをトラバースするのは非常に便利です。散らばっているのでまだまだ使えます。