JavaScriptда CSS класслар билан стиллаш
Элементларни style атрибути орқали
стиллаш баъзан қулай бўлса-да, кўпчилик ҳолларда -
энг яхши фикр эмас. Муаммо шундаки, стиллар
JavaScript файли бўйлаб тарқалиб кетади ва
уларни ўзгартириш меҳнатталаб қўйади.
CSS файлларда стилларни белгилаш ана шунча
қулайки, уларни JavaScript кодига чуқур қозишмай
осонгина ўзгартириш мумкин.
Мисол учун бизда бирор хабар чиқарувчи элемент бор дейлик. Хабар "яхши" бўлишиб, яшил рангда чиқса ва "ёмон" бўлишиб, қизил рангда чиқса. Бундай ҳолда энг яхши ҳал бу́зиш учун мос CSS классларни ясаш бўларди:
.success {
color: green;
}
.error {
color: red;
}
Энди "яхши" хабар чиқарганда биз элементга "яхши" классни берамиз:
elem.textContent = 'good';
elem.classList.add('success');
"Ёмон" хабар чиқарганда эса биз элементга "ёмон" классни берамиз:
elem.textContent = 'bad';
elem.classList.add('error');
Сонлар билан абзацлар берилган. Ушбу абзацларни цикл билан айлантиринг ва жуфт сонларни ўз ичига олган абзацларни қизил рангга, тоқ сонларни ўз ичига олганларни эса яшил рангга боянг.
