Atribut data-* ngidini sampeyan nyimpen data khusus lan pribadi ing unsur HTML apa pun. Iki cara standar kanggo nglengkapi metadata menyang DOM sing bisa dibaca JavaScript, tanpa nyalahake atribut non-standar utawa kelas.
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
Rong aturan utama: data-user-role diakses minangka dataset.userRole (garis miring dadi camelCase), lan saben nilai minangka string — konversi menawa perlu (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);
});
Nyimpen id ing saben unsur tegese siji pamiwalan ing induk bisa ngatur kabeh item.
data-* minangka cara sing resik lan sesuai standar kanggo ngirim data server menyang DOM kanggo JavaScript sisi klien (tanpa nelpon API tambahan), kanggo nyambungake delegasi acara, lan kanggo nggerakake negara CSS — tanpa nggawe atribut non-standar sing bakal nggawe HTML ora valid.
Untene, aja nyimpen data gedhe utawa sensitif ana; bisa katon ing markup.