So verwenden Sie data-*-Attribute in HTML5

Das Datenattribut in HTML5 wird hauptsächlich zum Speichern privater benutzerdefinierter Daten auf der Seite verwendet, um eine bessere Benutzererfahrung zu schaffen.

Viele neue Attribute wurden zu HTML hinzugefügt Attribute, heute werden wir die data-*-Attribute in HTML5 vorstellen, ich hoffe, es wird für alle hilfreich sein.

[Empfohlene Kurse: HTML5-Kurs ]

data-* Die Bedeutung des data-*-Attributs

data-*-Attribut wird zum Speichern der privaten benutzerdefinierten Daten der Seite oder Anwendung verwendet sind die benutzerdefinierten Daten für alle HTML-Elemente, die Daten speichern, die von JavaScript genutzt werden können, um eine bessere Benutzererfahrung zu schaffen.

data-*-Attribut besteht aus zwei Teilen:

Attributname: Der Attributname darf keine Großbuchstaben enthalten und nach dem Präfix „data-“ muss ein Zeichen stehen, das nicht leer sein darf .

Attributwert: Der Attributwert kann eine beliebige Zeichenfolge sein.

<element data-*="somevalue">

Beispiel

data-animal-type="动物类"

So verwenden Sie Daten-*-Attribute

Da benutzerdefinierte Datenattribute gültiges HTML 5 sind, können sie verwendet werden in Verwenden Sie sie in jedem Browser, der HTML 5-Dokumenttypen unterstützt:

Wir können die anfängliche Höhe oder Deckkraft von Elementen festlegen, die möglicherweise zum Speichern von JavaScript-Animationen erforderlich sind, und auch Parameter für Flash-Filme festlegen, die über JavaScript geladen werden Speichern Sie benutzerdefinierte Netzwerkanalyse-Tag-Daten und mehr.

Beispiel:

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  
小猫咪
  
苹果
  

Rendering:

Vor dem Klicken

Nach dem Klicken

Hinweis

Obwohl Datenattribute flexibel sind, sind Datenattribute beispielsweise nicht für alle Probleme geeignet Da Datenattribute besser zum Speichern von Daten oder Elementen geeignet sind, sollten sie nicht verwendet werden. Beispielsweise sollten Datums-/Uhrzeitdaten semantisch angezeigt und nicht in benutzerdefinierten Datenattributen gespeichert werden, und bestimmte Datenattribute sollten nicht an formatiertes CSS gebunden sein. Da Datenattribute immer häufiger verwendet werden, können außerdem Konflikte bei den Namenskonventionen immer größer werden. Daher sollten Sie bei der Benennung darauf achten, Verwechslungen mit Plug-in- oder öffentlichen Attributnamen zu vermeiden.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle, die HTML5 lernen, hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie data-*-Attribute in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!