Kommentar: HTML5 hat benutzerdefinierten Datenattributen eine neue Funktion hinzugefügt, dh Daten-* benutzerdefinierte Attribute. In HTML5 können wir das Präfix mit Daten verwenden, um die benutzerdefinierten Eigenschaften festzulegen. Wir müssen einige Daten speichern
Natürlich können Sie in fortschrittlichen Browsern über Skripte definieren und zugreifen. Sehr nützlich in der Projektpraxis.
Zum Beispiel:
Verwenden Sie die Attributmethode, um auf den Wert des Datenattributs zuzugreifen
Es ist sehr bequem, die Attribute-Methode zu verwenden, um auf den Wert des Datenattributs zuzugreifen:
// Verwenden Sie GetAtTribute, um Datenattribut zu erhalten
var user = document. getElementById ('Benutzer');
var userername = pflanzlich. getAtTribute ('Data-Uname'); // userername = 'script House' '
var userId = pflanzlich. getAttribute ('Data-uid'); // userID = '12345'
// Verwenden Sie SetAttribute, um Data-Properties festzulegen
Benutzer. setAttribute ('data-site', 'http://www.vevb.com');
Diese Methode funktioniert in allen modernen Browsern einwandfrei, ist jedoch nicht das benutzerdefinierte Datenattribut von HTML 5, das für die Verwendung verwendet wird. Andernfalls unterscheidet sie sich nicht von den zuvor verwendeten benutzerdefinierten Attributen, beispielsweise:
<div id = "user" uid = "12345" uname = "script House"> </div>
<Script>
// Verwenden Sie GetAtTribute, um Datenattribut zu erhalten
var user = document. getElementById ('Benutzer');
var userername = pflanzlich. getAttribute ('uname'); // userername = 'script House' '
var userId = pflanzlich. getAttribute ('uid'); // userID = '12345'
// Verwenden Sie SetAttribute, um Data-Properties festzulegen
Benutzer. setAttribute ('site', 'http://www.vevb.com');
</script>
Dieses "ursprüngliche" benutzerdefinierte Attribut unterscheidet sich nicht von dem oben genannten Daten-* benutzerdefinierten Attribut, und die Namensattributnamen sind unterschiedlich.
Das Dataset-Attribut zugreift auf den Wert des Datenattributs von Daten-* benutzerdefiniert
Auf diese Weise greifen Sie auf den Datensatz-Attributwert eines Datenattributs zu, indem Sie auf das Dataset-Attribut eines Elements zugreifen. Diese Datensatzeigenschaft ist Teil der HTML5-JavaScript-API und wird verwendet, um ein DomstringMap-Objekt mit allen ausgewählten Elementdatenattributen zurückzugeben.
Bei Verwendung dieser Methode sollte das Datenpräfix entfernt werden, anstatt den vollständigen Attributnamen wie Data-UID zu verwenden.
Ein weiterer besonderer Hinweis ist: Wenn der Datentattributname beispielsweise Bindestrich enthält, wird der Bindestrich entfernt und in Kamel-ähnliche Benennung konvertiert. Der vorherige Attributname sollte konvertiert werden: Datum der Zeit.
<div data-id = "1234567890" data-name = "Skript House" Data-of-Burt-of-Geburten> Tür </div>
<script type = "text/javaScript">
var el = document.querySelector ('#user');
console.log (el.id); // 'Benutzer'
console.log (el.dataset); // a domstringmap
console.log (El.Dataset.id); // '1234567890'
console.log (El.Dataset.Name); // 'Skripthaus'
console.log (El.Dataset.DateOfBirth); // ''
El.Dataset.DateOfBirth = '1985-01-05'; // Legen Sie den Wert von Datendatum der Heimat fest.
console.log ('somedataattr' in El.Dataset); // false
El.Dataset.Somedataattr = 'mydata';
console.log ('somedataattr' in El.Dataset); // true
</script>
Wenn Sie eine Data-Property löschen möchten, können Sie Folgendes tun: EL löschen. Datensatz. Ausweis ; oder El .Dataset. id = null; .
Es sieht wunderschön aus, haha, aber leider wird das neue Dataset -Attribut nur in Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ Browser implementiert, sodass GetAtTribute und Setattribute in dieser Zeit am besten verwendet werden.
Über Data-Property Selector
In der tatsächlichen Entwicklung können Sie es nützlich finden. Sie können verwandte Elemente basierend auf Ihrem benutzerdefinierten Datenattribut auswählen. Verwenden Sie beispielsweise QuerySelectorall, um Elemente auszuwählen:
// Wählen Sie alle Elemente aus, die das Attribut "datenblühend" enthalten
dokumentieren . querySelectorAll ('[datenblütige]');
// Wählen Sie alle Elemente mit dem Attributwert "Data-text-colour" rot aus
dokumentieren . querySelectorAll ('[data-text-colour = "rot"]');
In ähnlicher Weise können wir auch CSS-Stile für die entsprechenden Elemente durch den Daten-Attributwert festlegen, z. B. das folgende Beispiel:
<style type = "text/css">
.user {
Breite: 256px;
Höhe: 200px;
}
.user [data-name = 'feiwen'] {
Farbe: braun
}
.user [data-name = 'css'] {
Farbe: Rot
}
</style>
<div class = "Benutzer" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "Benutzer" data-id = "124" Data-name = "CSS"> Pier </div>