Styling met classes in JavaScript
Elementen stylen via het style attribuut
is soms handig, maar meestal - niet het
beste idee. Het probleem is dat de stijlen
verspreid zullen zijn over het JavaScript-bestand
en het arbeidsintensief zal zijn om ze te wijzigen.
Het is veel handiger om stijlen in CSS-bestanden
in te stellen, zodat ze eenvoudig kunnen worden gewijzigd,
zonder in JavaScript-code te moeten graven.
Stel dat we bijvoorbeeld een element hebben dat een bericht weergeeft. Het bericht kan "goed" zijn en weergegeven worden in de kleur groen en "slecht" en weergegeven worden in de kleur rood. De beste oplossing in dit geval zou zijn om hiervoor de bijbehorende CSS-classes te maken:
.success {
color: green;
}
.error {
color: red;
}
Nu geven we bij het weergeven van een "goed" bericht het element de "goede" class:
elem.textContent = 'good';
elem.classList.add('success');
En bij het weergeven van een "slecht" bericht geven we het element de "slechte" class:
elem.textContent = 'bad';
elem.classList.add('error');
Er zijn paragrafen met getallen. Doorloop deze paragrafen met een lus en kleur paragrafen die even getallen bevatten, rood, en die oneven getallen bevatten - groen.
