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:

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

Nu geven we bij het weergeven van een "goed" bericht het element de "goede" class:

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

En bij het weergeven van een "slecht" bericht geven we het element de "slechte" class:

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