Izmena stilova preko data- atributa u JavaScript

Da bismo rešili problem opisan u prethodnoj lekciji, nećemo dodeljivati elementu klase, već ćemo menjati vrednost data- atributa. Ovo je zgodno jer takav atribut može imati samo jednu vrednost i pri upisu nova vrednost automatski prepisuje staru.

Na primer, ovako ćemo postaviti uspešan stil:

html<div id="elem" data-type="success">
  text
</div>

A ovako stil za grešku:

html<div id="elem" data-type="error">
  text
</div>

Stilove naših stanja ćemo postaviti preko selektora atributa:

css[data-type="success"] {
  color: green;
}
[data-type="warning"] {
  color: orange;
}
[data-type="error"] {
  color: red;
}

Sada lako možemo obojiti naš element u uspešnu boju:

javascriptelem.dataset.type = 'success';

A ovako ćemo obojiti u boju greške:

javascriptelem.dataset.type = 'error';