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:
.success {
color: green;
}
.error {
color: red;
}
Nüüd "hea" sõnumi kuvamisel anname elemendile "hea" klassi:
elem.textContent = 'good';
elem.classList.add('success');
Ja "halva" sõnumi kuvamisel anname elemendile "halva" klassi:
elem.textContent = 'bad';
elem.classList.add('error');
Antud on lõigud numbritega. Käige need lõigud tsükliga läbi ja värvige paarisnumbreid sisaldavad lõigud punaseks, ja paaritut numbreid sisaldavad - roheliseks.
