data-*

Die data-* globalen Attribute bilden eine Klasse von Attributen, die als benutzerdefinierte Datenattribute bezeichnet werden. Sie ermöglichen den Austausch proprietärer Informationen zwischen dem HTML und seiner DOM-Darstellung durch Skripte.

Probieren Sie es aus

Alle diese benutzerdefinierten Daten sind über die Schnittstelle HTMLElement des Elements, auf dem das Attribut gesetzt ist, verfügbar. Die Eigenschaft HTMLElement.dataset gewährt Zugriff darauf.

Das * kann durch jeden Namen ersetzt werden, der der Produktionsregel für XML-Namen folgt und folgende Empfehlungen einschließt:

  • Der Name sollte nicht mit xml (Groß-/Kleinschreibung wird nicht berücksichtigt) beginnen, da dies für zukünftige XML-Spezifikationen reserviert ist.
  • Der Name sollte keine Doppelpunkt-Zeichen (:) enthalten, da XML solchen Namen eine Bedeutung zuweist.
  • Der Name sollte keine Großbuchstaben enthalten, da XML vollständig in Kleinbuchstaben ist.

Dies sind Empfehlungen. Wenn diese Namensempfehlungen nicht befolgt werden, treten keine Fehler auf. Die Attribute werden weiterhin mit CSS Attributselektoren abgeglichen, wobei das Attribut ohne Berücksichtigung der Groß-/Kleinschreibung und jeder Attributwert unter Berücksichtigung der Groß-/Kleinschreibung behandelt wird. Attribute, die diesen drei Empfehlungen nicht entsprechen, werden auch weiterhin von der JavaScript-Eigenschaft HTMLElement.dataset erkannt, und Benutzeragenten werden das Attribut in den DOMStringMap aufnehmen, der alle benutzerdefinierten Datenattribute für ein HTMLElement enthält.

Wenn Sie planen, HTMLElement.dataset zu verwenden, kann der Teil des Attributnamens nach data- nur Zeichen enthalten, die in JavaScript-Eigenschaftsnamen erlaubt sind (und Bindestriche, die entfernt werden). Die dataset-Variante des Attributnamens entfernt das "data-" Präfix und konvertiert den Rest des Namens von kebab-case zu camelCase. Zum Beispiel ist element.getAttribute("data-test") gleichbedeutend mit element.dataset.test und data-test-abc wird als HTMLElement.dataset.testAbc (oder durch HTMLElement.dataset["testAbc"]) zugänglich sein. Vermeiden Sie nicht-alphabetische Zeichen nach einem Bindestrich, wie data-test-1 oder data--test, da sie von HTMLElement.dataset nicht erkannt werden.

Verwendung

Durch Hinzufügen von data-* Attributen können selbst gewöhnliche HTML-Elemente ziemlich komplexe und leistungsfähige Programmobjekte werden. Zum Beispiel könnte ein Raumschiff-„Sprite“ in einem Spiel einfach ein <img>-Element mit einem class-Attribut und mehreren data-* Attributen sein:

html
<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()" />

Für ein ausführlicheres Tutorial über die Verwendung von HTML-Datenattributen siehe Using data attributes.

Spezifikationen

Specification
HTML Standard
# attr-data-*

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch