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.
Edit
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.
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
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").
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);
});
Shranjevanje id-ja na vsakem elementu pomeni, da en listener na prvič lahko obravnava vse elemente.
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.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj