Vad är data-* attribut och hur läser du dem?

Question

Accepted Answer

**`data-*` attribut** låter dig lagra anpassad, privat data på vilket som helst HTML-element. De är ett standardsätt att bifoga metadata till DOM som JavaScript kan läsa, utan att missbruka icke-standardiserade attribut eller klasser. ```html ``` ## Läsa dem i JavaScript via `dataset` ```js const 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 ``` Två viktiga regler: `data-user-role` nås som `dataset.userRole` (streck blir camelCase), och **varje värde är en sträng** — konvertera efter behov (`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## Läsa i CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## Ett vanligt mönster: event delegation ```js list.addEventListener("click", (e) => { const id = e.target.dataset.id; // know which item was clicked if (id) deleteItem(id); }); ``` Att lagra id på varje element innebär att en lyssnare på föräldern kan hantera alla objekt. ## Varför det spelar roll `data-*` är det rena, standardkonforma sättet att skicka serverdata in i DOM för klient-side JS (utan ett extra API-anrop), för att ställa in event delegation och för att driva CSS-tillstånd — utan att uppfinna icke-standardiserade attribut som skulle göra HTML ogiltig. Lagra inte stora eller känsliga data där; de är synliga i markeringen.

Läsa dem i JavaScript via dataset

Läsa i CSS

Ett vanligt mönster: event delegation

Varför det spelar roll

Läsa dem i JavaScript via `dataset`