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:

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

Nå, når vi viser en "bra" melding, vil vi gi elementet en "bra" klasse:

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

Og når vi viser en "dårlig" melding vil vi gi elementet en "dårlig" klasse:

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