Estilização com Classes em JavaScript
Estilizar elementos através do atributo style
às vezes é conveniente, mas na maioria das vezes - não é a
melhor ideia. O problema é que os estilos
ficarão espalhados pelo arquivo JavaScript
e será trabalhoso alterá-los.
É muito mais conveniente definir estilos em arquivos CSS
para que possam ser facilmente alterados,
sem precisar fuçar no código JavaScript.
Suponha, por exemplo, que temos um elemento que exibe uma mensagem. A mensagem pode ser "boa" e ser exibida na cor verde, ou "ruim" e ser exibida na cor vermelha. A melhor solução neste caso seria criar as respectivas classes CSS:
.success {
color: green;
}
.error {
color: red;
}
Agora, ao exibir uma mensagem "boa" vamos dar ao elemento a classe "boa":
elem.textContent = 'good';
elem.classList.add('success');
E ao exibir uma mensagem "ruim" vamos dar ao elemento a classe "ruim":
elem.textContent = 'bad';
elem.classList.add('error');
Foram dados parágrafos com números. Percorra esses parágrafos com um loop e pinte os parágrafos que contêm números pares de vermelho, e os que contêm números ímpares - de verde.
