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

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

• Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
• Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
• Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
• Reguläre Ausdrücke und neue HTML5-Elemente
• So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen