Verwendung von data-Attributen

HTML ist darauf ausgelegt, erweiterbar zu sein, um Daten, die mit einem bestimmten Element verknüpft sein sollen, ohne eine definierte Bedeutung zu versehen. data-* Attribute ermöglichen es uns, zusätzliche Informationen auf standardisierten, semantischen HTML-Elementen zu speichern, ohne auf andere Hacks wie nicht-standardmäßige Attribute oder zusätzliche Eigenschaften im DOM zurückzugreifen.

In diesem Artikel

HTML-Syntax

Die Syntax ist einfach. Jedes Attribut an einem Element, dessen Attributname mit data- beginnt, ist ein Datenattribut. Stellen Sie sich vor, Sie haben einige Artikel und möchten zusätzliche Informationen speichern, die keine visuelle Darstellung haben. Verwenden Sie einfach data-Attribute dafür:

html
<main>
  <article
    id="electric-cars"
    data-columns="3"
    data-index-number="12314"
    data-parent="cars">
    <!-- Electric car content -->
  </article>

  <article
    id="solar-cars"
    data-columns="3"
    data-index-number="12315"
    data-parent="cars">
    <!-- Solar car content -->
  </article>

  <article
    id="flying-cars"
    data-columns="4"
    data-index-number="12316"
    data-parent="cars">
    <!-- Flying car content -->
  </article>
</main>

JavaScript-Zugriff

Das Auslesen der Werte dieser Attribute in JavaScript ist ebenfalls sehr einfach. Sie könnten getAttribute() mit ihrem vollständigen HTML-Namen verwenden, um sie zu lesen, aber der Standard definiert einen einfacheren Weg: ein DOMStringMap, das Sie über eine dataset Eigenschaft auslesen können.

Um ein data-Attribut über das dataset-Objekt zu erhalten, greifen Sie auf die Eigenschaft durch den Teil des Attributnamens nach data- zu (beachten Sie, dass Bindestriche in camel case umgewandelt werden).

js
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 von article.dataset.columns = 5 dieses Attribut in "5" ändern.

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

js
// Find all elements with a data-columns attribute
const 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 results
threeColumnArticles.forEach((article) => {
  console.log(article.dataset.indexNumber);
});

CSS-Zugriff

Da Datenattribute einfache HTML-Attribute sind, können Sie sogar aus CSS darauf zugreifen. Um zum Beispiel die übergeordneten Daten im Artikel anzuzeigen, können Sie generierten Inhalt in CSS mit der attr()-Funktion verwenden:

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

Sie können auch die Attributselektoren in CSS verwenden, um Stile gemäß den Daten zu ändern:

css
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 das Styling wirksam wird.

Beispiele

Stilvarianten

Stellen Sie sich vor, Sie haben eine callout-Klasse. Jetzt möchten Sie verschiedene Varianten wie "note" und "warning" implementieren. Traditionell verwenden Menschen einfach unterschiedliche Klassennamen.

html
<div class="callout callout--note">...</div>
<div class="callout callout--warning">...</div>

css
.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 in Betracht ziehen können:

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

css
.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);
}

Es gibt mehrere Vorteile davon:

Es eliminiert viele ungültige Zustände, wie das Anwenden von callout--note ohne auch callout hinzuzufügen, oder das gleichzeitige Anwenden mehrerer Varianten.
Ein separates data-variant-Attribut ermöglicht eine statische Analyse für gültige Werte über Linting oder Ty-Checking.
Das Umschalten der Variante ist intuitiver: Sie können div.dataset.variant = "warning"; verwenden, anstatt die classList zu manipulieren, was mehrere Schritte erfordert.

Beliebige Daten mit DOM-Elementen verknüpfen

Viele Web-Apps haben JavaScript-Daten als Quelle der Wahrheit für ihren UI-Zustand. In diesen Fällen fügen Sie nur HTML-Attribute hinzu, die für das Rendering erforderlich sind. Datenattribute sind nützlich in Fällen, in denen alles im Markup vorhanden ist und JavaScript nur zum Verarbeiten von Ereignissen, Synchronisieren des Zustands usw. benötigt wird.

Beispielsweise haben wir in unserem Karussell mit Scroll-Margin ein HTML-Dokument, das bereits mit vielen <img> Elementen gefüllt ist. Die Bildquelle wird zunächst in data-src gespeichert, um zu verhindern, dass eine Anfrage gesendet wird, und der echte src wird erst hinzugefügt, wenn das <img> ins Sichtfeld scrollt. Die Daten (Bildquelle) sind mit dem Element verknüpft, und JavaScript ist nur dafür verantwortlich, 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. Zusätzlich könnten Suchmaschinen-Crawler die Werte von Datenattributen nicht indexieren. Oft, wenn Sie nur beabsichtigen, das Datenattribut anzuzeigen, können Sie direkt textContent manipulieren.

Siehe auch

Dieser Artikel ist adaptiert von Using data attributes in JavaScript and CSS on hacks.mozilla.org.
Benutzerdefinierte Attribute werden auch in SVG 2 unterstützt; sehen Sie HTMLElement.dataset und data-* für mehr Informationen.
How to use HTML data attributes (Sitepoint)

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden