Kam skirti data atributai HTML?

data-* atributai naudojami saugoti naudotojo sukurtus duomenis, kurie neturi vizualinės reprezentacijos, tiesiogiai HTML elementuose.

Pagrindiniai naudojimo tikslai:

• Prieiga prie duomenų per JavaScript/CSS: Jie leidžia lengvai gauti ir manipuliuoti elemento duomenimis per JavaScript (element.dataset) arba naudoti juos CSS selektoriuose ([data-attribute="value"]).
• Meta informacijos saugojimas: Patogu saugoti papildomą informaciją, susijusią su elementu (pvz., produkto ID, naudotojo tipas, būsena).
• Sukurti individualius komponentus: Gali būti naudojami apibrėžiant elgseną ar savybes individualiems komponentams, įgyvendintiems su JavaScript.
• Semantikos gerinimas: Gali pridėti tam tikrą semantikos lygį, apibūdinant specifinius duomenis, susijusius su turiniu.

HTML pavyzdys:

<div data-product-id="123" data-category="electronics">
  Išmanusis telefonas
</div>

Prieiga per JavaScript:

// Elemento gavimas
const productElement = document.querySelector('div');

// Duomenų prieiga
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSS naudojimas:

/* Stilius elementams su data-category="electronics" */
[data-category="electronics"] {
  border: 1px solid blue;
}