data-* attributes hukuruhusu kuhifadhi data yako binafsi kwenye kipengele chochote cha HTML. Ni njia ya kawaida ya kuambatanisha metadata kwenye DOM ambayo JavaScript inaweza kuisoma, bila kuangeza sifa zisizofuata kiwango au darasa.
html
Edit
data-* attributes hukuruhusu kuhifadhi data yako binafsi kwenye kipengele chochote cha HTML. Ni njia ya kawaida ya kuambatanisha metadata kwenye DOM ambayo JavaScript inaweza kuisoma, bila kuangeza sifa zisizofuata kiwango au darasa.
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
Sheria mbili muhimu: data-user-role hufikiliwa kama dataset.userRole (dashi hubadilika kuwa camelCase), na kila thamani ni kamba — badilisha kama inavyohitajika (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);
});
Kuhifadhi id kwenye kila kipengele inamaanisha mgombezi mmoja juu ya mzazi unaweza kushughulikia vipengele vyote.
data-* ni njia safi, inayofuata kiwango cha kupitisha data kutoka kwa seva kwenye DOM kwa JavaScript upande wa mteja (bila simu ya ziada ya API), kuandaa wagilizaji wa tukio, na kueneza hali ya CSS — bila kubuniwa sifa zisizofuata kiwango ambazo zingeweza kuifanya HTML kuwa si halali.
Usihifadhi data kubwa au nyeti huko; inaonekana katika markup.