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:

680d154488544b176e4eeae07b550d61 94b3e26ee717c64999d7867364b1b4a3

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

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-

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

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(&#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>

Wenn Sie ein Datenattribut löschen möchten, können Sie Folgendes tun: delete id ; oder el .dataset = null ;

Es sieht wunderschön aus, haha, aber leider ist das neue Datensatzattribut nur im Browser Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ implementiert, also ist es so Verwenden Sie in diesem Zeitraum am besten getAttribute und setAttribute für den Betrieb.

Über Daten-Attributauswahl

In der tatsächlichen Entwicklung finden Sie es möglicherweise nützlich, Sie können Daten basierend auf - Attributauswahlbezogenen Elementen anpassen . Verwenden Sie beispielsweise querySelector

All, um Elemente auszuwählen:

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-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:

Der Code lautet wie folgt:

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

[Verwandte Empfehlungen]

1.

Kostenloses HTML5-Video-Tutorial

2

Detaillierte Erklärung der H5-Ereignisattribute

3 .

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

4

Code-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!