Ausführliche Erläuterung der benutzerdefinierten HTML5-Daten-*-Attribute

In jQuerys attr und prop wird erwähnt, dass die unsachgemäße Verwendung von Eigenschaften in Versionen vor IE9 zu Speicherverlusten führt und der Unterschied zwischen Attributen und Eigenschaften auch sehr problematisch ist. In HTML5 wird die Methode data-* zum Anpassen von Attributen hinzugefügt. Das sogenannte Daten-* ist eigentlich das Datenpräfix plus ein benutzerdefinierter Attributname. Daten können mit einer solchen Struktur gespeichert werden. Die Verwendung von data-* kann die aktuelle Situation verwirrender und nicht verwalteter benutzerdefinierter Attribute lösen.

Es gibt zwei Einstellungsmethoden für data-*, die direkt in HTML-Element-Tags geschrieben werden können.

 <div id=test data-age=24> Klicken Sie hier </div>

Das Datenalter ist ein benutzerdefiniertes Attribut, das wir auch über JavaScript bedienen können. Elemente in HTML5 verfügen über ein Datensatzattribut, das eine Sammlung von Schlüssel-Wert-Paaren vom Typ DOMStringMap ist.

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

Dadurch wird dem div ein benutzerdefiniertes Attribut von data-my hinzugefügt. Bei der Verwendung von JavaScript zum Betrieb des Datensatzes sind zwei Dinge zu beachten.

1. Wir müssen das Präfix data-* entfernen, wenn wir Attribute hinzufügen oder lesen. Wie im obigen Beispiel verwenden wir nicht die Form test.dataset.data-my = 'Byron';.

2. Wenn der Attributname auch einen Bindestrich (-) enthält, muss er in die Kamel-Schreibweise umgewandelt werden. Wenn jedoch ein Selektor in CSS verwendet wird, müssen wir das Bindestrichformat verwenden.

Fügen Sie dem Code gerade Inhalte hinzu

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

 test.dataset.birthDate = '19890615';

Auf diese Weise haben wir das benutzerdefinierte Attribut data-birth-date über JavaScript festgelegt und dem div im CSS-Stylesheet einige Stile hinzugefügt, um den Effekt zu sehen.

Beim Lesen erfolgt auch die Verwendung von , um die Attribute zu erhalten. Das Datenpräfix muss ebenfalls entfernt und die Bindestriche in die Groß-/Kleinschreibung umgewandelt werden.

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

Einige Schüler fragen sich vielleicht, ob es außer der Benennung einen Unterschied zwischen this und getAttribute/setAttribute gibt.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('data-sex', 'male'); 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);

Daraus können wir ersehen, dass beide Attribute auf Attribute setzen (Unsinn, sonst können sie als benutzerdefinierte Attribute bezeichnet werden), was bedeutet, dass getAttribute/setAttribute auf alle Datensatzinhalte angewendet werden kann und der Datensatzinhalt nur eine Teilmenge der Attribute ist Die Sache ist die Benennung, aber es gibt nur Attribute mit dem Datenpräfix im Datensatz (es gibt kein „age=25“-Attribut).

Warum verwenden wir also immer noch data-*? Einer der größten Vorteile besteht darin, dass wir alle benutzerdefinierten Attribute im Datensatzobjekt einheitlich verwalten können.

Die schlechte Nachricht ist, dass die Browserkompatibilität von data-* sehr pessimistisch ist.

1. Internet Explorer 11+
2. Chrome 8+
3. Firefox 6.0+
4. Opera 11.10+
5. Safari 6+

Unter ihnen blendet IE11+ einfach die Augen meiner Freunde. Es scheint, dass noch ein langer Weg vor uns liegt, um dieses Attribut vollständig zu nutzen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.