HTML5 データ-* カスタム属性_html/css_WEB-ITnose

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

読み書きメソッド

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

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

data-age はカスタム属性です。もちろん、JavaScript を使用して設定することもできます。操作するには、HTML5 の要素には DOMStringMap 型のキーと値のペアのコレクションである dataset 属性が必要です。このようにして、data-my カスタム属性が div に追加されます。 JavaScript を使用して 2 つのデータセットを操作する場合の注意点

1. 属性を追加または読み取る際には、test.dataset.data-my = 'Byron という形式を使用しません。 ';。

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

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

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

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

読み取り時には、データセット オブジェクトも使用します。属性を取得するには「.」を使用します。データの接頭辞も削除する必要があります。ハイフンはキャメルケースの名前に変換する必要がありますgetAttribute/setAttribute

一部の学生はこれと getAttribute/setAttribute を尋ねるかもしれませんが、名前付け以外に違いはありますか?

test.dataset.birthDate = '19890615';

を見てみましょう。属性を設定するつまり、 getAttribute/setAttribute はすべてのデータセットの内容を操作できます。特別なのは名前付けですが、存在するのは属性だけです。データセット内に data- プレフィックスが付いています (age=25 のものはありません)。

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

ブラウザの互換性

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

Internet Explorer 11+

Chrome 8+

Firefox 6.0+

Opera 11.10+

Safari 6+

その中で彼らにとって、IE11+ は単に私の友達を盲目にしているだけのようです。この属性を完全に使用するには長い道のりがあるようです

この記事は http://www.cnblogs.com/dolphinX/p/3348458 .html

から転載されています。