Heim > Web-Frontend > H5-Tutorial > Hauptteil

Benutzerdefinierte HTML5-Attributdaten - * Detaillierte Einführung und JS-Betriebsbeispiele_HTML5-Tutorialfähigkeiten

WBOY
Freigeben: 2016-05-16 15:48:12
Original
1997 Leute haben es durchsucht

Natürlich können Definition und Datenzugriff über Skripte in erweiterten Browsern erfolgen. Sehr nützlich in der Projektpraxis.

Zum Beispiel:

Code kopieren
Der Code lautet wie folgt:


Verwenden Sie die Attributmethode, um auf den Wert des benutzerdefinierten Attributs data-* zuzugreifen

Es ist sehr praktisch, die Attribute-Methode zu verwenden, um auf den Wert von data-* benutzerdefinierten Attributen zuzugreifen:

Kopieren Sie den Code
Der Code lautet wie folgt:

// Verwenden Sie getAttribute, um das Datenattribut abzurufen
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = 'Script Home'
var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'

// Verwenden Sie setAttribute, um das Datenattribut
festzulegen user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

Diese Methode kann in allen modernen Browsern normal funktionieren, ist jedoch nicht der Zweck der benutzerdefinierten data-*-Attribute von HTML 5, da sie sich sonst nicht von den benutzerdefinierten Attributen unterscheidet, die wir zuvor verwendet haben, zum Beispiel:

Kopieren Sie den Code
Der Code lautet wie folgt:


<script><br> // Verwenden Sie getAttribute, um das Datenattribut abzurufen<br> var user = document . getElementById ( 'user' ) ;<br> var userName = plant . getAttribute ( 'uname' ); // userName = 'Script Home'<br> var userId = plant . getAttribute ( 'uid' ); // userId = '12345'<br> <br> // Verwenden Sie setAttribute, um das Datenattribut <br> festzulegen user . setAttribute ( 'site' , 'http://www.jb51.net' ) ;<br> </script>

Dieses „ursprüngliche“ benutzerdefinierte Attribut unterscheidet sich nicht vom oben genannten benutzerdefinierten Attribut „data-*“, aber der Name des Wissensattributs ist anders.

Datensatzattribut-Zugriffsdaten-*benutzerdefinierter Attributwert

Diese Methode greift auf den Wert von benutzerdefinierten data-*-Attributen zu, indem sie auf das Datensatzattribut eines Elements zugreift. Das Dataset-Attribut ist Teil der HTML5-JavaScript-API und wird verwendet, um ein DOMStringMap-Objekt mit den Datenattributen aller ausgewählten Elemente zurückzugeben.

Bei Verwendung dieser Methode sollte das Präfix „data-“ entfernt werden, anstatt den vollständigen Attributnamen wie „data-uid“ für den Zugriff auf Daten zu verwenden.

Eine weitere zu beachtende Sache ist, dass, wenn der Datenattributname einen Bindestrich enthält, zum Beispiel: Daten-Geburtsdatum, der Bindestrich entfernt und in eine Kamel-Groß-/Kleinschreibung umgewandelt wird. Der vorherige Attributname wird danach konvertiert dass es sein sollte: dateOfBirth.

Code kopieren
Der Code lautet wie folgt:

Dock


Wenn Sie ein Datenattribut löschen möchten, können Sie Folgendes tun: delete el id ;

Sieht wunderschön aus, haha, aber leider ist das neue Datensatzattribut nur in den Browsern Chrome 8 Firefox (Gecko) 6.0 Internet Explorer 11 Opera 11.10 Safari 6 implementiert, daher ist es in der Zwischenzeit am besten, getAttribute und setAttribute zum Betrieb zu verwenden.

Über den Datenattributselektor

In der tatsächlichen Entwicklung kann es hilfreich sein, relevante Elemente basierend auf benutzerdefinierten Datenattributen auszuwählen. Verwenden Sie beispielsweise querySelectorAll, um Elemente auszuwählen:

Kopieren Sie den Code
Der Code lautet wie folgt:

// Alle Elemente auswählen, die das Attribut „data-flowering“ enthalten
document . querySelectorAll ( '[data-flowering]' ) ;

// Alle Elemente auswählen, die den Attributwert „data-text-colour“ von Rot enthalten
document . querySelectorAll ( '[data-text-color="red"]' ) ;

Ebenso können wir CSS-Stile für entsprechende Elemente über den Datenattributwert festlegen, wie zum Beispiel im folgenden Beispiel:

Code kopieren
Der Code lautet wie folgt:


.user {
Breite: 256px ;
Höhe: 200px ;
}

.user[data-name='feiwen'] {
Farbe: braun
}

.user[data-name='css'] {
Farbe: rot
}

1

dock
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage