Stilizacija s klasami v JavaScript

Stilizirati elemente prek atributa style je včasih priročno, vendar je največkrat ne najboljša ideja. Težava je v tem, da bodo stili razpršeni po JavaScript datoteki in jih bo težko spreminjati. Veliko bolj priročno je nastaviti stile v CSS datotekah, da jih je mogoče enostavno spreminjati, brez kopanja po JavaScript kodi.

Za primer naj imamo element, ki izpiše neko sporočilo. Sporočilo je lahko "dobro" in se izpiše zeleno ter "slabo" in se izpiše rdeče. Najboljša rešitev v tem primeru je narediti ustrezne CSS razrede:

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

Zdaj bomo pri izpisu "dobrega" sporočila elementu dali "dober" razred:

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

Pri izpisu "slabega" sporočila pa bomo elementu dali "slab" razred:

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