Izmenično preklapljanje stilov prek data- atributa v JavaScript

Za rešitev problema, opisanega v prejšnji lekciji, ne bomo nastavljali razredov elementu, temveč bomo spreminjali vrednost data- atributa. To je priročno, ker ima tak atribut lahko samo eno vrednost in pri pisanju nova vrednost samodejno prepiše staro.

Za primer, tako bomo nastavili uspešen stil:

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

In tako stil za napako:

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

Stile naših stanj bomo nastavili s selektorji atributov:

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

Zdaj z lahkoto lahko pobarvamo naš element v uspešno barvo:

javascriptelem.dataset.type = 'success';

In tako ga pobarvamo v barvo napake:

javascriptelem.dataset.type = 'error';