Stilering met klasse in JavaScript

Om elemente te styl deur die style attribuut is soms gerieflik, maar meestal - nie die beste idee nie. Die probleem is dat die style versprei sal wees oor die JavaScript-lêer en dit sal tydrowend wees om te verander. Dit is baie geriefliker om style in CSS- lêers te plaas, sodat dit maklik verander kan word sonder om in die JavaScript-kode te moet grawe.

Laat ons byvoorbeeld 'n element hê wat 'n boodskap vertoon. Die boodskap kan "goed" wees en vertoon word in groen kleur en "sleg" wees en vertoon word in rooi kleur. Die beste oplossing in so 'n geval sal wees om die toepaslike CSS-klasse te skep:

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

Nou, wanneer ons die "goeie" boodskap vertoon sal ons die element die "goeie" klas gee:

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

En wanneer ons die "slegte" boodskap vertoon sal ons die element die "slegte" klas gee:

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

Daar is paragrawe met nommers. Deurloop hierdie paragrawe met 'n lus en kleur die paragrawe wat eve getalle bevat, in rooi, en die wat onewe getalle bevat - in groen.