Kaj so data-* atributi in kako jih prebereš?

Question

Accepted Answer

**`data-*` atributi** ti omogočajo shranjevanje lastnih, privatnih podatkov na katerem koli HTML elementu. So standardni način za prilagajanje metapodatkov DOM-u, ki ga lahko JavaScript bere, brez zlorabe nestandardnih atributov ali razredov. ```html ``` ## Branje v JavaScriptu prek `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 ``` Dve ključni pravili: `data-user-role` se dostopa kot `dataset.userRole` (pomišljaji se spremenijo v camelCase), in **vsaka vrednost je niz** — pretvori po potrebi (`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## Branje v CSS ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* display the value */ ``` ## Pogost vzorec: event delegation ```js list.addEventListener("click", (e) => { const id = e.target.dataset.id; // know which item was clicked if (id) deleteItem(id); }); ``` Shranjevanje id-ja na vsakem elementu pomeni, da en listener na prvič lahko obravnava vse elemente. ## Zakaj je to pomembno `data-*` je čist, standarden način za prenos podatkov iz strežnika v DOM za client-side JS (brez dodatnega API klica), za nastavljanje event delegacije in za vodenje CSS stanja — brez izmišljanja nestandardnih atributov, ki bi naredili HTML neveljavnega. Ne shranjuj tam velikih ali občutljivih podatkov; vidni so v označbi.

Branje v JavaScriptu prek dataset

Branje v CSS

Pogost vzorec: event delegation

Zakaj je to pomembno

Branje v JavaScriptu prek `dataset`