Stilizācija ar JavaScript klasēm

Stilizēt elementus caur style atribūtu dažreiz ir ērti, bet visbiežāk - ne visai veiksmīga ideja. Problēma ir tāda, ka stili būs izkaisīti pa JavaScript failu un tos būs darbietilpīgi mainīt. Daudz ērtāk ir norādīt stilus CSS failos, lai tos varētu viegli mainīt, nerokājoties JavaScript kodā.

Piemēram, pieņemsim, ka mums ir elements, kas izvada kādu ziņojumu. Ziņojums var būt "labs" un izvadīties zaļā krāsā un "slikts" un izvadīties sarkanā krāsā. Labākais risinājums šajā gadījumā būs izveidot tam atbilstošās CSS klases:

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

Tagad, izvadot "labu" ziņojumu, mēs elementam piešķirsim "labo" klasi:

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

Bet, izvadot "sliktu" ziņojumu, mēs elementam piešķirsim "slikto" klasi:

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

Doti rindkopas ar skaitļiem. Iziet cauri šīm rindkopām ciklā un rindkopas, kas satur pāra skaitļus, iekrāsojiet sarkanā krāsā, bet tās, kas satur nepāra skaitļus - zaļā krāsā.