Detaillierte Erläuterung der benutzerdefinierten Attributdaten von H5-*

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 ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用setAttribute设置 data- 属性

  user . setAttribute ( &#39;site&#39; , &#39;http://www.jb51.net&#39; ) ;

  </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.

date-of-birth, die Bindestriche entfernt und in die Formelbenennung in Kamelbuchstaben umgewandelt werden , der bisherige Attributname sollte nach der Konvertierung dateOfBirth lauten.

 <p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p>
  <script type="text/javascript">
  var el = document.querySelector(&#39;#user&#39;);
  console.log(el.id); // &#39;user&#39;
  console.log(el.dataset);//一个DOMStringMap
  console.log(el.dataset.id); // &#39;1234567890&#39;
  console.log(el.dataset.name); // &#39;脚本之家&#39;
  console.log(el.dataset.dateOfBirth); // &#39;&#39;
  el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.
  console.log(&#39;someDataAttr&#39; in el.dataset);//false
  el.dataset.someDataAttr = &#39;mydata&#39;;
  console.log(&#39;someDataAttr&#39; in el.dataset);//true
  </script>

Über Daten-Attributauswahl

All, um Elemente auszuwählen:

// 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=&#39;feiwen&#39;] {

  color : brown

  }

  .user[data-name=&#39;css&#39;] {

  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

Detaillierte Erklärung der H5-Ereignisattribute

Ausführliche Erklärung von 28 sehr wichtigen neuen Funktionen, neuen Techniken und neuen Technologien von H5

Code-Demonstration zur Erstellung eines Timers in H5

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!