data-* atributai leidžia saugoti tinkintus, privačius duomenis bet kuriame HTML elemente. Tai standartinis būdas prisegti metaduomenis prie DOM, kuriuos JavaScript gali perskaityti, nesuabusaudamas nestandartinių atributų ar klasių.
html
Edit
data-* atributai leidžia saugoti tinkintus, privačius duomenis bet kuriame HTML elemente. Tai standartinis būdas prisegti metaduomenis prie DOM, kuriuos JavaScript gali perskaityti, nesuabusaudamas nestandartinių atributų ar klasių.
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
Dvi pagrindinės taisyklės: data-user-role pasiekiamas kaip dataset.userRole (brūkšneliai virsta camelCase), ir kiekviena reikšmė yra eilutė — konvertuokite pagal poreikį (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);
});
Saugant id kiekviename elemente, vienas tėvinio klausytojas gali valdyti visus elementus.
data-* yra švarus, standartams atitinkantis būdas perduoti serverio duomenis į DOM kliento pusės JavaScript (be papildomo API skambučio), susiedinti įvykių delegavimą ir valdyti CSS būseną — nesukuriant nestandartinių atributų, kurie HTML padarytų negaliojančiu.
Neišsaugokite didelių ar jautrių duomenų; jie matomi žymėjime.