Stilizzazione con Classi in JavaScript
Stilizzare gli elementi tramite l'attributo style
a volte è conveniente, ma molto spesso non è
l'idea migliore. Il problema è che gli stili
saranno sparsi per il file JavaScript
e sarà laborioso modificarli.
È molto più comodo impostare gli stili nei file CSS
in modo che possano essere facilmente modificati,
senza scavare nel codice JavaScript.
Supponiamo ad esempio di avere un elemento che visualizza un messaggio. Il messaggio può essere "buono" e visualizzato in verde o "cattivo" e visualizzato in rosso. La soluzione migliore in questo caso sarebbe creare le relative classi CSS:
.success {
color: green;
}
.error {
color: red;
}
Ora, quando visualizziamo un messaggio "buono" assegneremo all'elemento la classe "buona":
elem.textContent = 'good';
elem.classList.add('success');
E quando visualizziamo un messaggio "cattivo" assegneremo all'elemento la classe "cattiva":
elem.textContent = 'bad';
elem.classList.add('error');
Sono dati paragrafi con numeri. Itera questi paragrafi con un ciclo e colora in rosso quelli che contengono numeri pari, e in verde quelli che contengono numeri dispari.
