Stylovanie pomocou tried v JavaScripte

Štýlovanie elementov cez atribút style je niekedy pohodlné, no najčastejšie to nie je veľmi dobrý nápad. Problém je v tom, že štýly budú roztrúsené po JavaScriptovom súbore a ich zmena bude prácne náročná. Oveľa pohodlnejšie je nastavovať štýly v CSS súboroch, aby sa dali ľahko meniť bez toho, aby ste museli prehrabávať JavaScriptový kód.

Nech máme napríklad element, ktorý zobrazuje nejakú správu. Správa môže byť "dobrá" a zobrazovať sa zelenou farbou a "zlá" a zobrazovať sa červenou farbou. Najlepším riešením v takom prípade bude vytvoriť pre to príslušné CSS triedy:

css.success {
  color: green;
}
.error {
  color: red;
}

Teraz pri zobrazení "dobrej" správy pridáme elementu "dobrú" triedu:

javascriptelem.textContent = 'good';
elem.classList.add('success');

A pri zobrazení "zlej" správy pridáme elementu "zlú" triedu:

javascriptelem.textContent = 'bad';
elem.classList.add('error');