Verwendung von Datenattributen

HTML ist darauf ausgelegt, erweiterbar zu sein, um Daten mit einem bestimmten Element zu verknüpfen, die jedoch keine definierte Bedeutung haben müssen. data-*-Attribute ermöglichen es uns, zusätzliche Informationen in standardisierten, semantischen HTML-Elementen zu speichern, ohne andere Techniken wie nicht-standardisierte Attribute oder zusätzliche Eigenschaften im DOM zu nutzen.

HTML-Syntax

Die Syntax ist einfach. Jedes Attribut in jedem Element, dessen Attributname mit data- 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 einfach data-Attribute:

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>

Zugriff mit JavaScript

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

Um ein data-Attribut über das dataset-Objekt zu erhalten, greifen Sie auf die Eigenschaft zu, die dem Teil des Attributnamens nach data- entspricht (dabei werden Bindestriche in Camel Case konvertiert).

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 eine Zeichenkette und kann gelesen und geschrieben werden. Im obigen Beispiel würde das Setzen von article.dataset.columns = 5 dieses Attribut auf "5" ändern.

Sie können auch document.querySelector() oder document.querySelectorAll() mit Datenattributselektoren verwenden, um ein Element oder alle passenden Elemente zu finden:

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

Zugriff mit CSS

Da Datenattribute einfache HTML-Attribute sind, können Sie sie auch aus CSS abrufen. Um beispielsweise die Eltern-Daten im Artikel anzuzeigen, können Sie generierten Inhalt in CSS mit der Funktion attr() verwenden:

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

Sie können auch die Attributselektoren in CSS nutzen, um Stile je nach Datenattribut zu ändern:

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

Sie können all das in Aktion sehen in diesem JS Bin-Beispiel.

Datenattribute können auch genutzt werden, um Informationen zu speichern, die sich ständig ändern, z. B. Punktestände in einem Spiel. Mit den CSS-Selektoren und dem JavaScript-Zugriff können Sie hier einige raffinierte Effekte erstellen, ohne eigene Anzeigeroutinen schreiben zu müssen. Sehen Sie sich dieses Screencast für ein Beispiel an, das generierten Inhalt und CSS-Übergänge verwendet (JS Bin-Beispiel).

Datenwerte sind Zeichenketten. Zahlenwerte müssen im Selektor in Anführungszeichen gesetzt werden, damit die Stilregeln wirksam werden.

Probleme

Speichern Sie keinen Inhalt, der sichtbar und zugänglich sein sollte, in Datenattributen, da assistive Technologien möglicherweise keinen Zugriff darauf haben. Darüber hinaus können Suchcrawler die Werte von Datenattributen möglicherweise nicht indexieren.

Siehe auch