`Atributele data-*` în HTML

Atribute personalizate care încep cu data- și păstrează informații suplimentare pe un element, citite apoi din JavaScript sau din CSS.

Sintaxă tag

<li data-id-produs="1042" data-pret="49.90">Caiet</li>

Ce face `Atributele data-*`

Orice atribut al cărui nume începe cu data- este valid în HTML5. Îl folosești pentru a pune pe element date de care are nevoie scriptul tău: un cod de produs, un preț, o stare. Browserul nu afișează și nu interpretează aceste valori.

În JavaScript, atributele sunt disponibile prin proprietatea element.dataset. Numele se transformă: prefixul data- dispare, iar cratimele urmate de o literă devin majusculă (camelCase). De exemplu, data-id-produs se citește cu dataset.idProdus. Valorile sunt întotdeauna șiruri de caractere.

În CSS poți selecta elemente după aceste atribute ([data-stare="epuizat"]) și poți afișa valoarea cu attr() în proprietatea content.

Atribute

Atribut	Descriere
`data-nume`	Numele de după `data-` trebuie să aibă cel puțin un caracter, fără majuscule și fără să înceapă cu `xml`. Valoarea este un text oarecare.
`element.dataset`	Obiect JavaScript cu toate atributele `data-*` ale elementului, în format camelCase. Poți citi, modifica sau șterge (`delete`) valori.

Exemple

Exemplul 1: Calcularea totalului unui coș din atribute data-*

Fiecare produs are prețul în data-pret. Scriptul îl transformă în număr și adună valorile.

<ul id="cos">
  <li data-id-produs="1042" data-pret="12.50">Caiet A4</li>
  <li data-id-produs="2210" data-pret="35.00">Rucsac</li>
  <li data-id-produs="3301" data-pret="8.90">Pix albastru</li>
</ul>
<p id="total"></p>

<script>
  let total = 0;
  for (const produs of document.querySelectorAll("#cos li")) {
    total += Number(produs.dataset.pret);
  }
  document.getElementById("total").textContent = "Total: " + total.toFixed(2) + " lei";
</script>

Ce afișează browserul

• Caiet A4
• Rucsac
• Pix albastru
Total: 56.40 lei

Exemplul 2: Stilizarea după valoarea unui atribut data-*

Selectorul de atribut din CSS colorează produsele epuizate, fără clase suplimentare.

<style>
  [data-stare="epuizat"] { color: #9ca3af; text-decoration: line-through; }
</style>

<ul>
  <li data-stare="in-stoc">Cană ceramică – 25 lei</li>
  <li data-stare="epuizat">Tricou Iași – 60 lei</li>
</ul>