HTML ist mit dem Gedanken der Erweiterbarkeit für Daten konzipiert, die mit einem bestimmten Element verknüpft sein sollten, aber keine definierte Bedeutung haben müssen.data-* Attribute ermöglichen es uns, zusätzliche Informationen auf standardmäßigen, semantischen HTML-Elementen zu speichern, ohne auf andere Tricks wie nicht-standardisierte Attribute oder zusätzliche Eigenschaften auf dem DOM zurückgreifen zu müssen.

HTML-Syntax

Die Syntax ist einfach. Jedes Attribut an einem Element, dessen Attributname mitdata- beginnt, ist ein Datenattribut. Angenommen, Sie haben einige Artikel und möchten zusätzliche Informationen speichern, die keine visuelle Darstellung haben. Verwenden Sie hierfür einfachdata Attribute:

<main>  <article       data-columns="3"    data-index-number="12314"    data-parent="cars">    <!-- Electric car content -->  </article>  <article       data-columns="3"    data-index-number="12315"    data-parent="cars">    <!-- Solar car content -->  </article>  <article       data-columns="4"    data-index-number="12316"    data-parent="cars">    <!-- Flying car content -->  </article></main>

JavaScript-Zugriff

Das Auslesen der Werte dieser Attribute inJavaScript ist ebenfalls sehr einfach. Sie könntengetAttribute() mit ihrem vollständigen HTML-Namen verwenden, um sie auszulesen, doch der Standard definiert einen einfacheren Weg: EinDOMStringMap, den Sie über einedataset Eigenschaft auslesen können.

Um eindata Attribut über dasdataset Objekt zu erhalten, greifen Sie auf die Eigenschaft mit dem Teil des Attributnamens nachdata- zu (beachten Sie, dass Bindestriche inCamel Case umgewandelt werden).

const article = document.querySelector("#electric-cars");// The following would also work:// const article = document.getElementById("electric-cars")article.dataset.columns; // "3"article.dataset.indexNumber; // "12314"article.dataset.parent; // "cars"

Jede Eigenschaft ist ein String und kann gelesen und geschrieben werden. Im obigen Fall würde das Setzen vonarticle.dataset.columns = 5 dieses Attribut in"5" ändern.

Sie können auchdocument.querySelector() oderdocument.querySelectorAll() mit Datenattributselektoren verwenden, um ein Element oder alle Elemente zu finden, die übereinstimmen:

// Find all elements with a data-columns attributeconst articles = document.querySelectorAll("[data-columns]");// Find all elements with data-columns="3"const threeColumnArticles = document.querySelectorAll('[data-columns="3"]');// You can then iterate over the resultsthreeColumnArticles.forEach((article) => {  console.log(article.dataset.indexNumber);});

CSS-Zugriff

Beachten Sie, dass aufgrund der Tatsache, dass Datenattribute normale HTML-Attribute sind, Sie auch vonCSS darauf zugreifen können. Um zum Beispiel die übergeordneten Daten beim Artikel anzuzeigen, können Sie mit dergenerierten Inhalt in CSS dieattr() Funktion verwenden:

article::before {  content: attr(data-parent);}

Sie können auch dieAttributselektoren in CSS nutzen, um Stile gemäß den Daten zu ändern:

article[data-columns="3"] {  width: 400px;}article[data-columns="4"] {  width: 600px;}

Datenwerte sind Strings. Zahlenwerte müssen im Selektor in Anführungszeichen gesetzt werden, damit die Stiländerung wirksam wird.

Beispiele

Stilvarianten

Stellen Sie sich vor, Sie haben einecallout Klasse. Nun möchten Sie verschiedene Varianten wie "note" und "warning" implementieren. Traditionell verwenden die Leute einfach unterschiedliche Klassennamen.

<div>...</div><div>...</div>

.callout {  margin: 0.5em 0;  padding: 0.5em;  border-radius: 4px;  border-width: 2px;  border-style: solid;}.callout--note {  border-color: rgb(15 15 235);  background-color: rgb(15 15 235 / 0.2);}.callout--warning {  border-color: rgb(235 15 15);  background-color: rgb(235 15 15 / 0.2);}

Mit Datenattributen gibt es eine Alternative, die Sie erwägen können:

<div>...</div><div data-variant="note">...</div><div data-variant="warning">...</div>

.callout {  margin: 0.5em 0;  padding: 0.5em;  border-radius: 4px;  border-width: 2px;  border-style: solid;}/* Default style */.callout:not([data-variant]) {  border-color: rgb(15 15 15);  background-color: rgb(15 15 15 / 0.2);}.callout[data-variant="note"] {  border-color: rgb(15 15 235);  background-color: rgb(15 15 235 / 0.2);}.callout[data-variant="warning"] {  border-color: rgb(235 15 15);  background-color: rgb(235 15 15 / 0.2);}

Dies bietet mehrere Vorteile:

• Es eliminiert viele ungültige Zustände, wie das Anwenden voncallout--note ohne gleichzeitiges Hinzufügen voncallout oder das gleichzeitige Anwenden mehrerer Varianten.
• Ein separatesdata-variant Attribut ermöglicht die statische Analyse auf gültige Werte durch Linting oder Typprüfung.
• Das Umschalten der Variante ist intuitiver: Sie könnendiv.dataset.variant = "warning"; verwenden, anstatt dieclassList zu manipulieren, was mehrere Schritte erfordert.

Beliebige Daten mit DOM-Elementen verknüpfen

Viele Web-Apps haben JavaScript-Daten als maßgebliche Quelle für ihren UI-Status. In diesen Fällen fügen Sie nur die für das Rendering erforderlichen HTML-Attribute hinzu. Datenattribute sind nützlich in Fällen, in denen alles im Markup vorhanden ist und JavaScript nur zum Eventhandling, für die Synchronisierung des Zustands usw. benötigt wird.

Zum Beispiel, in unseremKarussell mit Scroll-Margin Beispiel haben wir eine HTML-Seite, die bereits mit vielen<img> Elementen gefüllt ist. Die Bildquelle wird zunächst indata-src gespeichert, um zu verhindern, dass Anforderungen ausgelöst werden, und der eigentlichesrc wird nur hinzugefügt, wenn das<img> ins Blickfeld scrollt. Die Daten (Bildquelle) sind dabei mit dem Element zusammengeführt, und das JavaScript ist nur dafür zuständig, das Verhalten zu definieren.

Probleme

Speichern Sie keinen Inhalt, der sichtbar und zugänglich sein sollte, in Datenattributen, da unterstützende Technologien möglicherweise nicht darauf zugreifen können. Außerdem werden die Werte von Datenattributen möglicherweise nicht von Suchmaschinen-Crawlern indexiert. Wenn Sie nur möchten, dass das Datenattribut angezeigt wird, können Sie in vielen Fällen direkttextContent manipulieren.

Siehe auch

• Dieser Artikel ist adaptiert vonUsing data attributes in JavaScript and CSS on hacks.mozilla.org.
• Benutzerdefinierte Attribute werden auch in SVG 2 unterstützt; sieheHTMLElement.dataset unddata-* für weitere Informationen.
• How to use HTML data attributes (Sitepoint)