Stylowanie klasami w JavaScript

Stylowanie elementów za pomocą atrybutu style czasami jest wygodne, ale najczęściej - nie jest najlepszym pomysłem. Problem polega na tym, że style będą rozproszone po pliku JavaScript i ich modyfikacja będzie pracochłonna. Znacznie wygodniej jest definiować style w plikach CSS, aby można je było łatwo zmieniać, nie grzebiąc w kodzie JavaScript.

Załóżmy na przykład, że mamy element wyświetlający pewną wiadomość. Wiadomość może być "dobra" i wyświetlać się zielonym kolorem lub "zła" i wyświetlać się czerwonym kolorem. Najlepszym rozwiązaniem w takim przypadku będzie stworzenie odpowiednich klas CSS:

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

Teraz przy wyświetlaniu "dobrej" wiadomości będziemy nadawać elementowi "dobrą" klasę:

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

A przy wyświetlaniu "złej" wiadomości będziemy nadawać elementowi "złą" klasę:

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