JavaScript'те классдар менен стилдөө

Элементтерди style атрибуту аркылуу стилдөө кээде ыңгайлуу болсо да, көбүнчө - эң ийгиликтүү идея эмес. Маселе мында, стилдер JavaScript файлына таралып кетет жана аларды өзгөртүү татаал болот. Колдон келген стилдерди CSS файлдарында белгилөө аларды оңой өзгөртүүгө мүмкүндүк берет, JavaScript кодуна кирип-чыкпай.

Мисал үчүн бизде кандайдыр бир билдирүү чыгаруучу элемент бар дейли. Билдирүү "жакшы" болушу мүмкүн, жашыл түстө көрсөтүлөт жана "жаман" болушу мүмкүн, кызыл түстө көрсөтүлөт. Мындай учурда эң жакшы чечим бул үчүн тиешелүү CSS классдарын түзүү болот:

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

Эми "жакшы" билдирүүнү чыгарганда биз элементке "жакшы" классын беребиз:

elem.textContent = 'жакшы';
elem.classList.add('success');

Ал эми "жаман" билдирүүнү чыгарганда биз элементке "жаман" классын беребиз:

elem.textContent = 'жаман';
elem.classList.add('error');

Сандар менен абзацтар берилген. Абзацтарды цикл менен айлантып, жуп сандарды камтыган абзацтарды кызыл түскө боёңуз, ал эми так сандарды камтыгандарды жашыл түскө боёңуз.