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:
.success {
color: green;
}
.error {
color: red;
}
Nu, når vi viser en "god" besked, vil vi give elementet en "god" klasse:
elem.textContent = 'good';
elem.classList.add('success');
Og når vi viser en "dårlig" besked, vil vi give elementet en "dårlig" klasse:
elem.textContent = 'bad';
elem.classList.add('error');
Der gives afsnit med tal. Gennemgå disse afsnit med en løkke og farv afsnit, der indeholder lige tal, i rød farve, og dem, der indeholder ulige tal - i grøn.
