Stiilide lisamine klasside abil JavaScriptis

Elementide stiilimine style atribuudi kaudu on mõnikord mugav, kuid enamasti pole see kõige parem idee. Probleem on selles, et stiilid jaotuvad JavaScript faili laiali ja nende muutmine on töömahukas. Palju mugavam on määratleda stiilid CSS failides, nii et neid saaks hõlpsasti muuta, ilma et peaks JavaScript koodi otsima.

Olgu meil näiteks element, mis kuvab teatud sõnumit. Sõnum võib olla "hea" ja kuvada rohelise värvi ning "halb" ja kuvada punase värvi. Parim lahendus sellisel juhul on teha selle jaoks vastavad CSS klassid:

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

Nüüd "hea" sõnumi kuvamisel anname elemendile "hea" klassi:

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

Ja "halva" sõnumi kuvamisel anname elemendile "halva" klassi:

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