Styling med klasser i JavaScript

At style elementer via attributten style er nogle gange praktisk, men oftest er det ikke den bedste idé. Problemet er, at stilarterne vil være spredt ud over JavaScript-filen og det vil være besværligt at ændre dem. Det er meget mere bekvemt at angive stilarter i CSS-filer, så de nemt kan ændres uden at rode i JavaScript-koden.

Lad os for eksempel sige, at vi har et element, der viser en besked. Beskeden kan være "god" og vises i grøn farve og "dårlig" og vises i rød farve. Den bedste løsning i sådant et tilfælde vil være at lave de tilsvarende CSS-klasser:

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

Nu, når vi viser en "god" besked, vil vi give elementet en "god" klasse:

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

Og når vi viser en "dårlig" besked, vil vi give elementet en "dårlig" klasse:

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