Dieses Mal werde ich Ihnen eine Zusammenfassung der Verwendung des data-*-Attributs in H5 geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des data-*-Attributs in H5? Werfen wir einen Blick darauf.
1. Über die Eigenschaften von HTML-Elementen
1. Es gibt einige Standardeigenschaften von HTML-Elementen:
id element Der eindeutige Bezeichner im Dokument;
title Zusätzliche erläuternde Informationen zum Element, normalerweise angezeigt über die Tooltip-Leiste
lang Der Sprachcode des Elementinhalts , sehr selten verwendet; dir-Sprachrichtung, selten verwendet; className, entsprechend dem Klassenattribut des Elements, unter Berücksichtigung des Konflikts mit der von ECMAScript reservierten Wortklasse, also className setAttribute() legt verwandte Attribute fest; RemoveAttribute() löscht verwandte Attribute;Über die Verwendung von getAttribute() und die direkte Verwendung von DOM zum Abrufen von HTML-Elementen Attribute Der Unterschied beim Abrufen der Attribute von Elementen:
Zum Beispiel:var header=document.getElementById('header'); console.log(header.id);//header console.log(header.getAttribute('id'));//header console.log(header.title);//test console.log(header.getAttribute('title'));//test console.log(header.myTitle);//undefined console.log(header.getAttribute('myTitle'));//monster1935
Ursache:
Nur Standardattribute im HTML-Element werden dem DOM-Objekt in Form von Attributen hinzugefügt.Sonderfall:
verfügt über zwei Arten von Merkmalen. Obwohl im DOM-Objekt entsprechende Attributnamen vorhanden sind, unterscheidet sich der Wert des Attributs vom zurückgegebenen Wert getAttribute() Nicht dasselbe.
1. Stilfunktionen: Bei Verwendung von DOM-Objektattributen für den Zugriff auf den Stil wird ein Objekt zurückgegeben, während beim Abrufen mit der Methode getAttribute() CSS-Text zurückgegeben wird.2.Ereignisverarbeitungsprogramm
(zum Beispiel: onclick): Bei Verwendung der Attribute des DOM-Objekts für den Zugriff wird eine JavaScript-Funktion zurückgegeben, und zwar über getAttribute () Beim Abrufen der Methode wird Java-Code zurückgegeben.Verwendung:
2. Benutzerdefinierte Attribute in Html5
1. Die Html5-Spezifikation schreibt vor, dass benutzerdefinierten Attributen das Präfix data- vorangestellt werden muss, um Informationen bereitzustellen, die nichts mit der Darstellung zu tun haben.
2. Verwenden Sie die Methoden getAttribute() und setAttribute(), um benutzerdefinierte Attribute zu bedienen. Zum Beispiel:var user=document.getElementById('user'); //使用attributes方法操作属性 //获取相关属性值 var name=user.getAttribute('data-name'); console.log(name)//monster1935 var age = user.getAttribute('data-age'); console.log(age);//123 //设置相关属性值 user.setAttribute('data-sex','male'); console.log(user.getAttribute('data-sex'));//male
3. Verwenden Sie einen Datensatz, um benutzerdefinierte Attribute zu bedienen.
Zum Beispiel:var el=document.querySelector('#user'); console.log(el.id); console.log(el.dataset); //返回的是一个DomStringMap对象 console.log(el.dataset.name); console.log(el.dataset.age); // 设置相关属性 el.dataset.home="shandong"; console.log(el.dataset); // 删除相关属性 // delete el.dataset.home; el.dataset.home = null; console.log(el.dataset);
4. Kompatibilitätsprobleme mit dem Datensatzattribut
5 Attributselektor
1.获取相关DOM元素 2.设置相关css样式 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:var elem=document.querySelectorAll("[data-name='monster1935']");
<style>
p{
width:100px;
height:200px;
margin:20px;
}
p[data-name="monster"]{
background-color: green;
}
p[data-name="monster1935"]{
background-color: red
}
</style>
Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendungsmethoden von data-*-Attributen in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!