Stilu maiņa, izmantojot data- atribūtu JavaScript

Lai atrisinātu problēmu, kas aprakstīta iepriekšējā nodarbībā, mēs neiestatīsim elementam klases, bet gan mainīsim data- atribūta vērtību. Tas būs ērti, jo šādam atribūtam var būt tikai viena vērtība un, ierakstot, jaunā vērtība pati aizstās veco.

Piemēram, šādi mēs iestatīsim veiksmīgo stilu:

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

Un šādi stilu kļūdai:

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

Mēs iestatīsim savu stāvokļu stilus, izmantojot atribūtu selektorus:

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

Tagad mēs viegli varam nokrāsot mūsu elementu veiksmes krāsā:

javascriptelem.dataset.type = 'success';

Un šādi mēs to nokrāsosim kļūdas krāsā:

javascriptelem.dataset.type = 'error';