JavaScript-də siniflərlə stil vermə

Elementləri style atributu vasitəsilə stil vermək bəzən rahat olsa da, çox vaxt ən uğurlu ideya deyil. Problem ondadır ki, stillər JavaScript faylı üzərində səpələnmiş olur və onları dəyişdirmək çətin olur. Stilləri CSS fayllarında təyin etmək daha rahatdır, belə ki, onları JavaScript kodunu araşdırmadan asanlıqla dəyişdirmək olar.

Nümunə üçün, bir mesaj çıxaran elementimiz olsun. Mesaj "yaxşı" ola bilər və yaşıl rəngdə, "pis" ola bilər və qırmızı rəngdə çıxarılır. Belə bir halda ən yaxşı həll bunun üçün uyğun CSS sinifləri yaratmaq olardı:

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

İndi "yaxşı" mesajı çıxararkən elementə "yaxşı" sinifi verəcəyik:

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

"Pis" mesajı çıxararkən isə elementə "pis" sinifi verəcəyik:

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

Rəqəmləri olan abzaslar verilib. Bu abzasları dövrlə keçin və cüt rəqəmləri ehtiva edən abzasları qırmızı rəngə, tək rəqəmləri ehtiva edənləri isə yaşıl rəngə boyayın.