HTML5s benutzerdefinierte data-*-Attribute

HTML5 fügt eine neue Funktion hinzu, nämlich das benutzerdefinierte Datenattribut, also das benutzerdefinierte data-*-Attribut. 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 Definition und Datenzugriff über Skripte in erweiterten Browsern erfolgen. Sehr nützlich in der Projektpraxis. Derzeit gibt es viele Frameworks, die diesen Ansatz übernehmen, und das häufigste ist jQueryMobile.
Die spezifischen Anwendungsbeispiele lauten wie folgt:

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></p>

Im traditionellen Ansatz können wir es wie folgt mit jquery verwenden:

$("#head").attr("data-home");  
$("#head").attr("data-home","new");

Oder der reine JS-Ansatz:
Im IE Im Browser können wir es direkt nach dem Abrufen des Objekts aufrufen

document.getElementById("head").["data-home"];  
document.getElementById("head").["data-home"] = "new";

In Firefox und Google Chrome können wir es über die getAttribute-Methode aufrufen:

document.getElementById("head").getAttribute("data-home");  
document.getElementById("head").setAttribute("data-home","new");

In der einfachen Operationsmethode in HTML5: (Datensatzattribut greift auf den Wert des benutzerdefinierten Attributs data-* zu)
Diese Methode greift auf den Wert des benutzerdefinierten Attributs data-* 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, z. B. „data-home“, 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 die Kamel-Schreibweise umgewandelt wird. Der vorherige Attributname wird konvertiert Ende sollte sein: dateOfBirth.

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</p>  <script type="text/javascript">  
    var el = document.querySelector(&#39;#head&#39;);  
    console.log(el.id);   
    console.log(el.dataset);//一个DOMStringMap  
    console.log(el.dataset.home);   
    console.log(el.dataset.author);   
    console.log(el.dataset.dateOfBirth);   
    el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.  
    //判断属性  
    console.log(&#39;testAttr&#39; in el.dataset);//false  
    el.dataset.testAttr = &#39;testAttr&#39;;  
    console.log(&#39;testAttr&#39; in el.dataset);//true  </script>

Wenn Sie ein Datenattribut löschen möchten, können Sie Folgendes tun: delete el.dataset.home; oder el.dataset.home = null;.
Ist es nicht sehr praktisch, so zu arbeiten? Einige Browser unterstützen dies jedoch möglicherweise noch nicht. Daher ist es in diesem Zeitraum am besten, getAttribute und setAttribute zum Betrieb zu verwenden oder es mit jquery zu verwenden.
Datenattributselektor
Während der tatsächlichen Entwicklung können relevante Elemente basierend auf benutzerdefinierten Datenattributen ausgewählt werden. Verwenden Sie beispielsweise querySelectorAll, um Elemente auszuwählen:
//Alle Elemente auswählen, die das Attribut „data-p“ enthalten.
document.querySelectorAll ('[data-p]') ; das 'data-a'-Attribut -href' Elemente mit dem Attributwert red
document.querySelectorAll ('[data-a-href="#"]') ; Element durch den Datenattributwert Style, wie im folgenden Beispiel:

Das obige ist der detaillierte Inhalt vonWas sind die benutzerdefinierten data-*-Attribute von HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!