Střídání stylů pomocí data- atributu v JavaScriptu

Pro vyřešení problému popsaného v předchozí lekci nebudeme prvku nastavovat třídy, ale budeme měnit hodnotu data- atributu. To bude výhodné tím, že takový atribut může mít pouze jednu hodnotu a při zápisu nová hodnota automaticky přepíše tu starou.

Jako příklad takto nastavíme úspěšný styl:

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

A takto styl pro chybu:

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

Styly našich stavů nastavíme pomocí selektorů atributů:

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

Nyní můžeme snadno obarvit náš prvek na úspěšnou barvu:

javascriptelem.dataset.type = 'success';

A takto jej obarvíme na barvu chyby:

javascriptelem.dataset.type = 'error';