Tyylien vuorottaminen data- attribuutin avulla JavaScriptissä

Ratkaistaksesemme edellisessä oppitunnissa kuvatun ongelman, emme aseta elementille luokkia, vaan muutamme data- attribuutin arvoa. Tämä on kätevää, koska tällaisella attribuutilla voi olla vain yksi arvo ja uuden arvon tallennus korvaa automaattisesti vanhan arvon.

Esimerkkinä asetamme tällä tavalla onnistunut tyylin:

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

Ja tällä tavalla tyylin virheelle:

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

Asetamme tilojemme tyylit attribuuttivalitsimien avulla:

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

Nyt voimme helposti värjätä elementtimme onnistuneen väriseksi:

javascriptelem.dataset.type = 'success';

Ja tällä tavalla värjäämme virheen väriseksi:

javascriptelem.dataset.type = 'error';