Stilsetting med klasser i JavaScript
Å style elementer gjennom attributtet style
er noen ganger praktisk, men som oftest - ikke den
mest vellykkede ideen. Problemet er at stilene
vil være spredt rundt i JavaScript-filen
og det vil være arbeidskrevende å endre dem.
Det er mye mer praktisk å sette stiler i CSS-
filer, slik at de enkelt kan endres
uten å rote seg gjennom JavaScript-koden.
La oss for eksempel si at vi har et element som viser en melding. Meldingen kan være "bra" og vises i grønn farge, eller "dårlig" og vises i rød farge. Den beste løsningen i et slikt tilfelle vil være å lage tilhørende CSS-klasser:
.success {
color: green;
}
.error {
color: red;
}
Nå, når vi viser en "bra" melding, vil vi gi elementet en "bra" klasse:
elem.textContent = 'good';
elem.classList.add('success');
Og når vi viser en "dårlig" melding vil vi gi elementet en "dårlig" klasse:
elem.textContent = 'bad';
elem.classList.add('error');
Det er gitt avsnitt med tall. Gå gjennom disse avsnittene med en loop og fargelegg avsnitt som inneholder partall i rød farge, og de som inneholder oddetall - i grønn.
