HTML5 データ -* カスタム属性の共有例

この記事では、HTML5のdata-*カスタム属性の詳細な説明について、関連情報を中心に紹介していますが、編集者が非常に優れていると思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

jQueryのattrとpropでは、IE9以前のバージョンでプロパティを不適切に使用するとメモリリークを引き起こすと述べましたが、AttributeとPropertyの違いも非常に面倒です HTML5でdata-*を追加する方法は、属性の定義から来ています。いわゆる data-* は、実際には data- プレフィックスとカスタム属性名を加えたものです。このような構造を使用してデータを保存できます。 data-* を使用すると、混乱を招き管理されていないカスタム属性の現在の状況を解決できます。

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

data-*には2つの設定メソッドがあり、HTML要素のタグに直接書き込むことができます

<p id="test" data-age="24">
        Click Here
    </p>

data-ageはカスタム属性です、もちろんJavaScriptを使用して行うこともできますこれを操作すると、HTML5 の要素は DOMStringMap 型のキーと値のペアのコレクションである dataset 属性を持ちます

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

このようにして、data-my のカスタム属性が p に追加され、 JavaScript を使用して操作する dataset

1 について注意すべき点が 2 つあります。上記の例のように、test.dataset.data-my = ' という形式は使用しません。バイロン「。」

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

を使用する必要があります。先ほどのコード

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

test.dataset.birthDate = '19890615';

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

データセットオブジェクトからも読み取られます。属性を取得するには「.」を使用します。データプレフィックスも削除する必要があります。ハイフンはキャメルケースの名前に変換する必要があります

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);
        }

getAttribute /setAttribute

これと 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

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

それでは、なぜ data-* を使用するのでしょうか? 最大の利点の 1 つは、すべてのカスタム属性をデータセット オブジェクト内で統一して管理できることです。したがって、これは非常に便利です。使用。

ブラウザの互換性

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

1. Internet Explorer 11+

2. Chrome 8+

3. Firefox 6.0+

   オペラ11.10+

4. Safari 6+

5. その中で、IE11+ は単に私の友人を盲目にしています。関連する推奨事項:

データは何ですか。 -* HTML5 のカスタム属性?

H5 でカスタム属性を取得および設定する方法

JavaScript のカスタム属性とメソッドのオブジェクト モデル コードの詳細な説明

以上がHTML5 データ -* カスタム属性の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。