Stylování pomocí tříd v JavaScriptu

Stylování prvků pomocí atributu style je někdy pohodlné, ale většinou to není nejvhodnější nápad. Problém je v tom, že styly budou rozptýleny po JavaScriptovém souboru a bude pracné je měnit. Mnohem pohodlnější je nastavovat styly v CSS souborech, aby bylo možné je snadno měnit, bez hrabání se v JavaScriptovém kódu.

Pro příklad mějme prvek, který zobrazuje nějakou zprávu. Zpráva může být "dobrá" a zobrazovat se zelenou barvou a "špatná" a zobrazovat se červenou barvou. Nejlepším řešením v takovém případě bude vytvořit pro to odpovídající CSS třídy:

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

Nyní při zobrazení "dobré" zprávy dáme prvku "dobrou" třídu:

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

A při zobrazení "špatné" zprávy dáme prvku "špatnou" třídu:

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