Ausführliche Erläuterung der Verwendung von benutzerdefinierten H5-Daten-*-Attributen

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung der benutzerdefinierten Datenattribute von H5 zu beachten sind . .

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 legt fest, 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“ lautet, 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 in der Zuordnung 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中文网其它相关文章！

推荐阅读：

HTML文档中嵌入JS方法总结

React Form组件封装步骤详解

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von benutzerdefinierten H5-Daten-*-Attributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!