Stilizacija klasama u JavaScriptu

Stilizovati elemente preko atributa style ponekad je zgodno, ali najčešće - nije najbolja ideja. Problem je u tome što će stilovi biti razbacani po JavaScript fajlu i biće ih naporno menjati. Mnogo je zgodnije postavljati stilove u CSS fajlovima, tako da se lako mogu menjati, bez kopanja po JavaScript kodu.

Neka za primer imamo element, koji ispisuje neku poruku. Poruka može biti "dobra" i ispisivati se zelenom bojom i "loša" i ispisivati se crvenom bojom. Najbolje rešenje u tom slučaju biće da se za to naprave odgovarajuće CSS klase:

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

Sada prilikom ispisivanja "dobre" poruke ćemo davati elementu "dobru" klasu:

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

A prilikom ispisivanja "loše" poruke ćemo davati elementu "lošu" klasu:

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