Alternarea stilurilor prin atributul data- în JavaScript

Pentru a rezolva problema descrisă în lecția anterioară, nu vom seta clase elementului, ci vom schimba valoarea atributului data-. Acest lucru este convenabil deoarece un astfel de atribut poate avea o singură valoare și la scriere, noua valoare va înlocui automat vechea.

De exemplu, așa vom seta stilul de succes:

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

Și așa stilul pentru eroare:

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

Vom seta stilurile pentru stările noastre folosind selectori de atribut:

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

Acum putem colora cu ușurință elementul nostru în culoarea de succes:

javascriptelem.dataset.type = 'success';

Și așa îl colorăm în culoarea de eroare:

javascriptelem.dataset.type = 'error';