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:
.success {
color: green;
}
.error {
color: red;
}
Teraz przy wyświetlaniu "dobrej" wiadomości będziemy nadawać elementowi "dobrą" klasę:
elem.textContent = 'good';
elem.classList.add('success');
A przy wyświetlaniu "złej" wiadomości będziemy nadawać elementowi "złą" klasę:
elem.textContent = 'bad';
elem.classList.add('error');
Dane są akapity z liczbami. Przejdź przez te akapity pętlą i akapity zawierające liczby parzyste, pokoloruj na czerwono, a zawierające nieparzyste - na zielono.
