HTML5 fügt eine neue Funktion namens benutzerdefinierte Datenattribute hinzu, bei denen es sich um benutzerdefinierte Datenattribute* handelt. In HTML5 können wir data- als Präfix verwenden, um die benutzerdefinierten Attribute festzulegen, die wir zum Speichern einiger Daten benötigen
Natürlich können fortgeschrittene Browser Daten über Skripte definieren und darauf zugreifen. Sehr nützlich in der Projektpraxis.
Zum Beispiel:
Der Code lautet wie folgt:
Verwenden Sie die Attributmethode, um auf Daten zuzugreifen – den Wert eines benutzerdefinierten Attributs
Es ist sehr praktisch, die Attribute-Methode zu verwenden, um auf den Wert des benutzerdefinierten Attributs data-* zuzugreifen:
Der Code lautet wie folgt:
// 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家' var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345' // 使用 set Attribute设置 data- 属性 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:
Der Code lautet wie folgt:
<p id = "user" uid = "12345" uname = "脚本之家" > </p> <script> // 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . getAttribute ( 'uname' ) ; // userName = '脚本之家' var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345' // 使用setAttribute设置 data- 属性 user . setAttribute ( 'site' , 'http://www.jb51.net' ) ; </script>
Dieses „ursprüngliche“ benutzerdefinierte Attribut unterscheidet sich nicht vom oben genannten benutzerdefinierten Attribut „data-*“, aber der Name des Wissensattributs ist anders.
Das Dataset-Attribut greift auf den Wert des benutzerdefinierten Attributs data-* zu.
Diese Methode greift auf das benutzerdefinierte Attribut data-* zu, indem sie auf das Dataset-Attribut eines Elements zugreift . Dieses Datensatzattribut ist Teil der HTML5 JavaScript API und wird verwendet, um eine DOMStringMap<🎜 aller ausgewählten Elementdaten zurückzugeben. Attribute >Objekt.
Bei Verwendung dieser Methode sollte das Datenpräfix entfernt werden, anstatt den vollständigen Attributnamen, z. B. data-uid, für den Zugriff auf Daten zu verwenden. Außerdem ist zu beachten, dass, wenn der Name des Datenattributs Bindestriche enthält, zum Beispiel: data-Der Code lautet wie folgt:<p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p> <script type="text/javascript"> var el = document.querySelector('#user'); console.log(el.id); // 'user' console.log(el.dataset);//一个DOMStringMap console.log(el.dataset.id); // '1234567890' console.log(el.dataset.name); // '脚本之家' console.log(el.dataset.dateOfBirth); // '' el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值. console.log('someDataAttr' in el.dataset);//false el.dataset.someDataAttr = 'mydata'; console.log('someDataAttr' in el.dataset);//true </script>
// Alle Elemente auswählen, die das Attribut „data-flowering“ enthalten
document . querySelectorAll ( '[data-flowering]' ) ;
//Alle Elemente auswählen, die den Attributwert „data-text-color“ von Rot enthalten
document . querySelectorAll ( '[data-text-color="red"]' ) ;
Ebenso können wir CSS-Stile für entsprechende Elemente über den Datenattributwert festlegen, wie im folgenden Beispiel:
<style type ="text/css"> .user { width : 256px ; height : 200px ; } .user[data-name='feiwen'] { color : brown } .user[data-name='css'] { color : red } </style> <p class = "user" data-id = "123" data-name = "feiwen" > 1 </p> <p class = "user" data-id = "124" data-name = "css" > 码头 </p>
Kostenloses HTML5-Video-Tutorial
2Detaillierte Erklärung der H5-Ereignisattribute
3 .Ausführliche Erklärung von 28 sehr wichtigen neuen Funktionen, neuen Techniken und neuen Technologien von H5
4Code-Demonstration zur Erstellung eines Timers in H5
5.H5 detailliertes Beispiel für den Abschluss mehrerer Bild-Uploads
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der benutzerdefinierten Attributdaten von H5-*. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!