JavaScript-da klasslar orqali stilizatsiya

Elementlarni style atributi orqali stilizatsiya qilish ba'zan qulay bo'lsa-da, ko'pincha bu eng yaxshi fikr emas. Muammo shundaki, stillar JavaScript fayli bo'ylab tarqalib ketadi va ularni o'zgartirish qiyin bo'ladi. Stillarni CSS fayllarida belgilash ancha qulayroq, chunki ularni o'zgartirish oson, JavaScript kodini qazishmasdan.

Misol uchun, bizda ma'lum bir xabarni chiqaradigan element bor deylik. Xabar "yaxshi" bo'lishi mumkin va yashil rangda chiqariladi yoki "yomon" bo'lishi mumkin va qizil rangda chiqariladi. Bunday holatda eng yaxshi yechim buning uchun mos keladigan CSS klasslarini yaratish bo'ladi:

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

Endi "yaxshi" xabarni chiqarganda biz elementga "yaxshi" klassini beramiz:

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

"Yomon" xabarni chiqarganda esa biz elementga "yomon" klassini beramiz:

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

Raqamli abzatslar berilgan. Ushbu abzatslarni tsikl bilan aylantiring va juft sonlarni o'z ichiga olgan abzatslarni qizil rangga bo'yang, toq sonlarni o'z ichiga olganlarni esa yashil rangga bo'yang.