JavaScript-да классҳо бо воситаи стил

Стил кардани унсурҳо тавассути атрибути 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');

Абзасҳои бо рақамҳо дода шудаанд. Онҳоро бо давр такрор кунед ва абзасҳое, ки рақамҳои ҷуфтро дар бар мегиранд, бо ранги сурх ранг кунед, ва онҳое, ки рақамҳои тоқро дар бар мегиранд - бо ранги сабз.