Milleks kasutatakse data atribuute HTML-is?

data-*-atribuutid kasutatakse kasutaja määratud andmete salvestamiseks, millel puudub visuaalne esitlus, otse HTML-elementides.

Peamised kasutamise eesmärgid:

• Andmetele juurdepääs JavaScripti/CSS-i kaudu: Need võimaldavad hõlpsasti saada ja manipuleerida elemendi andmeid JavaScripti (element.dataset) või kasutada neid CSS-i valijates ([data-attribute="value"]).
• Metaandmete salvestamine: Mugav lisainfo salvestamiseks, mis on seotud elemendiga (näiteks toote ID, kasutaja tüüp, seisund).
• Kohandatud komponentide loomine: Neid saab kasutada kohandatud komponentide käitumise või omaduste määratlemiseks, mis on rakendatud JavaScripti abil.
• Semantika parandamine: Võib lisada teatud taseme semantikat, kirjeldades spetsiifilisi andmeid, mis on seotud sisu.

HTML näide:

<div data-product-id="123" data-category="electronics">
  Nutitelefon
</div>

JavaScripti kaudu juurdepääs:

// Elementi saamine
const productElement = document.querySelector('div');

// Data atribuudi juurdepääs
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSS-is kasutamine:

/* Stiil elementidele, millel on data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}