Atributy data-* vám umožňují ukládat vlastní, soukromá data na libovolný HTML element. Jedná se o standardní způsob, jak připojit metadata k DOM, která může JavaScript číst, aniž byste zneužívali nestandardní atributy nebo třídy.
html
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 klíčová pravidla: data-user-role je přístupný jako dataset.userRole (pomlčky se změní na camelCase), a každá hodnota je řetězec — konvertujte podle potřeby (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);
});
Uložení ID na každý element znamená, že jeden posluchač na rodiči může zpracovat všechny prvky.
data-* je čistý, standardně kompatibilní způsob, jak předat data serveru do DOM pro JavaScript na straně klienta (bez dodatečného volání API), propojit event delegation a řídit stav CSS — bez vymýšlení nestandardních atributů, které by učinily HTML neplatným.
Neukládejte tam velká ani citlivá data; jsou viditelná v označení.