Zusammenfassung der Verwendungsmethoden von data-*-Attributen in H5

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

Im Beispiel dieses Artikels werden zwei Methoden demonstriert, um die Standardmerkmale und benutzerdefinierten Merkmale von HTML zu erhalten Elemente. Es kann Folgendes festgestellt werden:

getAttribute() kann sowohl auf Standardfunktionen als auch auf benutzerdefinierte Funktionen zugreifen, beim Zugriff auf HTML-Elementfunktionen mithilfe der Attribute des DOM-Elements selbst kann jedoch nur auf Standardfunktionen zugegriffen werden.

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:

Verwenden Sie beim Abrufen benutzerdefinierter Attribute nur die Methode getAttribute(). Verwenden Sie beim Betrieb des DOM die Attribute des Objekts, um diese abzurufen.

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

Das obige Beispiel zeigt die Verwendung der Methoden getAttribute() und setAttribute() zum Bedienen benutzerdefinierter Attribute von HTML-Elementen.

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

Das obige Beispiel zeigt die Verwendung von Datensatzattributen, um benutzerdefinierte Attribute zu bedienen. Der Wert des Dataset-Attributs ist ein Beispiel für eine DOMStringMap, eine Zuordnung von Name-Wert-Paaren. Bei dieser Zuordnung hat jedes Attribut in Form eines Datennamens ein entsprechendes Attribut. Der Unterschied besteht darin, dass der Attributname kein Datenpräfix enthält. (Wenn das benutzerdefinierte Attribut beispielsweise „Datenname“ ist, ist das entsprechende Attribut in der Zuordnung „Name“. Beachten Sie außerdem, dass der Name des Datenattributs Bindestriche enthält (z. B. „Datendatum-von-“). Geburt) ist das entsprechende Attribut im Mapping dateOfBirth, das zur Anzeige in das entsprechende Camel-Case-Format konvertiert wird.

4. Kompatibilitätsprobleme mit dem Datensatzattribut

5 Attributselektor

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

<style>
  p{
    width:100px;
    height:200px;
    margin:20px;
  }
  p[data-name="monster"]{
    background-color: green;
  }
  p[data-name="monster1935"]{
    background-color: red
  }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么实现JS同步、异步、延迟加载

怎样使用@angular/cli V6.0开发PWA应用

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!