Stiliserad med klasser i JavaScript

Att styla element via attributet style är ibland praktiskt, men oftast är det inte särskilt lyckat. Problemet är att stilar kommer att vara utspridda över JavaScript-filen och det blir arbetsamt att ändra dem. Det är mycket bekvämare att sätta stilar i CSS- filer, så att de enkelt kan ändras utan att gräva i JavaScript-koden.

Låt oss som exempel ha ett element som visar ett visst meddelande. Meddelandet kan vara "bra" och visas i grön färg och "dåligt" och visas i röd färg. Det bästa sättet i det här fallet skulle vara att skapa motsvarande CSS-klasser:

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

Nu när vi visar det "bra" meddelandet kommer vi att ge elementet den "bra" klassen:

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

Och när vi visar det "dåliga" meddelandet kommer vi att ge elementet den "dåliga" klassen:

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