data-* atributi omogućuju vam da pohranite prilagođene, privatne podatke na bilo kojem HTML elementu. Oni su standardni način za prikupljanje metapodataka na DOM koji JavaScript može čitati, bez zlouporabe nestandardnih atributa ili klasa.
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
Dva ključna pravila: data-user-role se pristupa kao dataset.userRole (crte se pretvaraju u camelCase), i svaka vrijednost je string — konvertirajte po potrebi (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);
});
Pohranjivanje id-a na svakom elementu znači da jedan poslušač na roditeljskom elementu može upravljati svim stavkama.
data-* je čist, standards-sukladan način proslijeđivanja podataka poslužitelja u DOM za JavaScript na strani klijenta (bez dodatnog API poziva), za postavljanje delegacije događaja, i za upravljanje CSS stanjem — bez izmišljanja nestandardnih atributa koji bi učinili HTML nevaljano.
Ne pohranjujte velike ili osjetljive podatke tamo; vidljivi su u biljeci.