data-* attributter lader dig gemme brugerdefinerede, private data på ethvert HTML-element. De er en standardmåde at vedhæfte metadata til DOM'en, som JavaScript kan læse, uden at misbruge ikke-standardiserede attributter eller klasser.
html
Edit
data-* attributter lader dig gemme brugerdefinerede, private data på ethvert HTML-element. De er en standardmåde at vedhæfte metadata til DOM'en, som JavaScript kan læse, uden at misbruge ikke-standardiserede attributter eller klasser.
Edit
datasetconst btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
To vigtige regler: data-user-role tilgås som dataset.userRole (bindestreger bliver til camelCase), og hver værdi er en streng — konverter efter behov (Number(btn.dataset.id), btn.dataset.isActive === "true").
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
At gemme id'et på hvert element betyder, at en listener på forælderen kan håndtere alle elementer.
data-* er den rene, standardkompatible måde at videregive serverdata til DOM for client-side JavaScript (uden et ekstra API-kald), for at forbinde event delegation og drive CSS-status — uden at opfinde ikke-standardiserede attributter, der ville gøre HTML ugyldigt.
Gem ikke store eller følsomme data der; det er synligt i markeringen.