Tyylittely luokilla JavaScriptissä

Elementtien tyylittely style-attribuutin kautta on joskus kätevää, mutta useimmiten - ei kaikkein onnistunein idea. Ongelmana on, että tyylit hajallaan JavaScript-tiedostossa ja niiden muuttaminen on työlästä. Paljon kätevämpää on asettaa tyylit CSS- tiedostoihin, jotta niitä voidaan helposti muuttaa, kaivelematta JavaScript-koodia.

Olkoon esimerkkinä elementti, joka näyttää jonkin viestin. Viesti voi olla "hyvä" ja näytetään vihreällä värillä ja "huono" ja näytetään punaisella värillä. Paras ratkaisu tässä tapauksessa on tehdä vastaavat CSS-luokat:

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

Nyt "hyvän" viestin näyttämisen yhteydessä annamme elementille "hyvän" luokan:

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

Ja "huonon" viestin näyttämisen yhteydessä annamme elementille "huonon" luokan:

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