Die data-* globalen Attribute bilden eine Klasse von Attributen, die als benutzerdefinierte Datenattribute bezeichnet werden und es ermöglichen, dass proprietäre Informationen zwischen dem HTML und seiner DOM-Darstellung durch Skripte ausgetauscht werden.
<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 die Schnittstelle HTMLElement des Elements verfügbar, auf dem das Attribut gesetzt ist. Die Eigenschaft HTMLElement.dataset gibt Zugriff auf diese Daten. Das * kann durch jeden beliebigen Namen ersetzt werden, der der Produktionsregel der XML-Namen folgt, die folgende Empfehlungen umfasst:
xml (nicht case-sensitiv) beginnen, da dies für zukünftige XML-Spezifikationen reserviert ist.:) enthalten, da XML solchen Namen eine Bedeutung zuweist.Dies sind Empfehlungen. Wenn diese Benennungsempfehlungen nicht befolgt werden, treten keine Fehler auf. Die Attribute werden weiterhin mit CSS Attributselektoren abgeglichen, wobei das Attribut nicht case-sensitiv und jeder Attributwert case-sensitiv ist. Attribute, die nicht diesen drei Empfehlungen entsprechen, werden auch weiterhin von der JavaScript-Eigenschaft HTMLElement.dataset erkannt, und Benutzeragenten werden das Attribut in das DOMStringMap aufnehmen, das alle benutzerdefinierten Datenattribute für ein HTMLElement enthält.
Wenn Sie planen, HTMLElement.dataset zu verwenden, kann der Teil des Attributnamens, der dem data- folgt, nur Zeichen enthalten, die in JavaScript-Property-Namen erlaubt sind (und Bindestriche, die entfernt werden). Die dataset-Version 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") äquivalent zu element.dataset.test und data-test-abc wird als HTMLElement.dataset.testAbc zugänglich sein (oder durch HTMLElement.dataset["testAbc"]). Vermeiden Sie nicht-alphabetische Zeichen nach einem Bindestrich, wie data-test-1 oder data--test, da diese von HTMLElement.dataset nicht erkannt werden.
Durch das Hinzufügen von data-* Attributen können selbst gewöhnliche HTML-Elemente zu recht komplexen und leistungsstarken Programmobjekten werden. Zum Beispiel könnte ein Raumfahrzeug-"Sprite" in einem Spiel einfach ein <img>-Element mit einem class-Attribut und mehreren data-* Attributen sein:
<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" />
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 siehe Verwendung von Datenattributen.
Spezifikationen Browser-Kompatibilität Siehe auchHTMLElement.dataset Eigenschaft, die den Zugriff und die Ãnderung dieser Werte ermöglicht.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4