A data-* attribútumok lehetővé teszik, hogy egyéni, privát adatokat tároljál bármelyik HTML elemen. Ez egy szabványos módja a metaadatok DOM-hoz csatolásának, amelyet a JavaScript tud olvasni, anélkül, hogy nem szabványos attribútumokat vagy osztályokat használnál.
Edit
dataset segítségévelconst 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
Két fő szabály: a data-user-role a dataset.userRole-ként érhető el (a kötőjelek camelCase-vé válnak), és minden érték egy string — szükség szerint konvertálj (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);
});
Az id tárolása minden elemen azt jelenti, hogy egy hallgató a szülőn kezelhet minden elemet.
A data-* a tiszta, szabványoknak megfelelő módja a szerver adatainak átadásának a DOM-ba az ügyféloldali JS-hez (további API hívás nélkül), az esemény delegálás beállításához és a CSS állapot vezérléséhez — anélkül, hogy nem szabványos attribútumokat találnál ki, amely érvénytelen HTML-t eredményezne.
Ne tárold ott a nagy vagy érzékeny adatokat; a feliraton láthatóak.