Diedata-*globalen Attribute bilden eine Klasse von Attributen, die alsbenutzerdefinierte Datenattribute bezeichnet werden. Sie ermöglichen es, proprietäre Informationen zwischen demHTML und seinerDOM-Darstellung durch Skripte auszutauschen.

Probieren Sie es aus

<h1>Secret agents</h1><ul>  <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>  <li data-id="97865">    Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in    "Goldeneye".  </li>  <li data-id="45732">    James Bond, 007: The main man; shaken but not stirred.  </li></ul>

h1 {  margin: 0;}ul {  margin: 10px 0 0;}li {  position: relative;  width: 200px;  padding-bottom: 10px;}li::after {  content: "Data ID: " attr(data-id);  position: absolute;  top: -22px;  left: 10px;  background: black;  color: white;  padding: 2px;  border: 1px solid #eeeeee;  opacity: 0;  transition: 0.5s opacity;}li:hover::after {  opacity: 1;}

Alle diese benutzerdefinierten Daten sind über dasHTMLElement-Interface des Elements zugänglich, auf dem das Attribut gesetzt ist. DieHTMLElement.dataset-Eigenschaft ermöglicht den Zugriff darauf.Das* kann durch jeden Namen ersetzt werden, derder Produktionsregel von XML-Namen folgt, die folgende Empfehlungen einschließt:

• Der Name sollte nicht mitxml (groß-/kleinschreibungsempfindlich) beginnen, da dies für zukünftige XML-Spezifikationen reserviert ist.
• Der Name sollte keine Doppelpunkte (:) enthalten, da XML solchen Namen eine Bedeutung zuweist.
• Der Name sollte keine Großbuchstaben enthalten, da XML komplett klein geschrieben wird.

Dies sind Empfehlungen. Wenn diesen Namensempfehlungen nicht gefolgt wird, treten keine Fehler auf. Die Attribute werden weiterhin mithilfe von CSS-Attributselektoren übereingestimmt, wobei das Attribut selbst nicht groß-/kleinschreibungsempfindlich ist, die Attributwerte jedoch schon. Attribute, die diesen drei Empfehlungen nicht entsprechen, werden auch weiterhin von der JavaScript-HTMLElement.dataset-Eigenschaft erkannt, und User-Agents werden das Attribut in dasDOMStringMap aufnehmen, das alle benutzerdefinierten Datenattribute für einHTMLElement enthält.

Wenn Sie planen,HTMLElement.dataset zu verwenden, darf der Teil des Attributnamens, der auf dasdata- folgt, nur Zeichen enthalten, die auch in JavaScript-Property-Namen erlaubt sind (und Bindestriche, die entfernt werden). Diedataset-Version des Attributnamens entfernt das "data-" Präfix und konvertiert den Rest des Namens vonKebab-Case zu CamelCase. Zum Beispiel istelement.getAttribute("data-test") äquivalent zuelement.dataset.test unddata-test-abc wird alsHTMLElement.dataset.testAbc zugänglich sein (oder durchHTMLElement.dataset["testAbc"]). Vermeiden Sie nicht alphabetische Zeichen nach einem Bindestrich, wiedata-test-1 oderdata--test, da sie vonHTMLElement.dataset nicht erkannt werden.

Nutzungshinweise

Durch das Hinzufügen vondata-* Attributen können sogar gewöhnliche HTML-Elemente recht komplexe und leistungsfähige Programmobjekte werden. Zum Beispiel könnte ein Raumschiff-„Sprite“ in einem Spiel einfach ein<img>-Element mit einemclass-Attribut und mehrerendata-* Attributen sein:

<img   src="shipX3.png"  data-ship-id="324"  data-weapons="laserI laserII"  data-shields="72%"  data-x="414354"  data-y="85160"  data-z="31940" />

function clickSpaceship() {  spaceships[this.dataset.shipId].blasted();}document.querySelectorAll("img.spaceship").forEach((ship) => {  ship.addEventListener("click", clickSpaceship);});

Für ein ausführlicheres Tutorial über die Verwendung von HTML-Datenattributen schauen Sie sichUsing data attributes an.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alleglobalen Attribute.
• DieHTMLElement.dataset Eigenschaft, die den Zugriff auf diese Werte ermöglicht und deren Änderung gestattet.
• Using data attributes