JavaScript-da klaslar bilen stil bermek

Elementleri style atributy arkaly stillemek käbir wagtlar amatly bolup biler, ýöne köplenç - iň owadan pikirlendirilmedik. Problema şonda ýatýar styller JavaScript faýlyna bölünip gider we olary üýtgetmek kyn bolar. Has amatly bolsa, olary ýeňillik bilen üýtgetmek üçin, JavaScript kodynda goýmazlykdan, CSS faýllarynda stilleri bellämek.

Mysal üçin, biziň bir elementimiz bolsun, ýörite bir habar görkezýän. Habar "gowy" bolup, ýaşyl reňkde görkezilip biler we "erbet" bolup, gyzyl reňkde görkezilip biler. Şeýle ýagdaýda iň gowy çözgüt şuňa laýyk CSS klaslaryny ýasamak bolar:

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

Indi "gowy" habary görkezende biz elemente "gowy" klasyny bereris:

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

"Erbet" habary görkezende bolsa biz elemente "erbet" klasyny bereris:

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

Sanlar bilen abzaslar berlen. Şu abzaslary aýlaw bilen aýlaň we jübüt sanlary öz içine alýan abzaslary, gyzyl reňke, ýöne tak sanlary öz içine alýanlary bolsa - ýaşyl reňke boýaň.