Atrybuty data-* pozwalają przechowywać niestandardowe, prywatne dane na dowolnym elemencie HTML. To standardowy sposób na dołączanie metadanych do DOM, które JavaScript może odczytać, bez nadużywania niestandardowych atrybutów czy klas.
html
Edit
Atrybuty data-* pozwalają przechowywać niestandardowe, prywatne dane na dowolnym elemencie HTML. To standardowy sposób na dołączanie metadanych do DOM, które JavaScript może odczytać, bez nadużywania niestandardowych atrybutów czy klas.
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
Dwie kluczowe zasady: data-user-role jest dostępny jako dataset.userRole (myślniki zamieniają się na camelCase), a każda wartość jest stringiem — konwertuj w razie potrzeby (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);
});
Przechowywanie id na każdym elemencie oznacza, że jeden słuchacz na rodzicu może obsługiwać wszystkie elementy.
data-* to czysty, zgodny ze standardami sposób na przekazanie danych z serwera do DOM dla JS po stronie klienta (bez dodatkowego wywołania API), konfiguracji delegowania zdarzeń i obsługi stanu CSS — bez wymyślania niestandardowych atrybutów, które uczyniłyby HTML nieprawidłowy.
Nie przechowuj tam jednak dużych ani wrażliwych danych; są one widoczne w kodzie HTML.