suchen

Heim >Web-Frontend >H5-Tutorial >Benutzerdefinierte HTML5-Attributdaten - * Detaillierte Einführung und JS-Betriebsbeispiele_HTML5-Tutorialfähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:48:122030Durchsuche

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
Stellungnahme：
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
Vorheriger Artikel：So implementieren Sie ein Sprachsuchfeld mit HTML5_HTML5-Tutorial-KenntnissenNächster Artikel：So implementieren Sie ein Sprachsuchfeld mit HTML5_HTML5-Tutorial-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen