Striedanie štýlov pomocou data- atribútu v JavaScripte

Na vyriešenie problému opísaného v predchádzajúcej lekcii nebudeme prvku nastavovať triedy, ale budeme meniť hodnotu data- atribútu. To bude výhodné tým, že takýto atribút môže mať iba jednu hodnotu a pri zápise nová hodnota automaticky prepíše starú.

Napríklad takto nastavíme úspešný štýl:

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

A takto štýl pre chybu:

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

Štýly našich stavov nastavíme pomocou selektorov atribútov:

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

Teraz môžeme jednoducho zafarbiť náš prvok na úspešnú farbu:

javascriptelem.dataset.type = 'success';

A takto zafarbíme na farbu chyby:

javascriptelem.dataset.type = 'error';