jQuery - Manipulação de classes CSS
No início desta seção, vimos como podemos manipular as propriedades CSS usando o método css:
$(".exemplo").css("display", "none");
Vimos também que a ação de esconder um elemento pode ainda ser simplificada, usando o método hide. Vamos falar mais sobre este método na aula sobre efeitos jQuery.
Vamos conhecer agora outros métodos muito úteis para trabalharmos com o CSS dos elementos por meio das classes.
addClass(), removeClass(), toggleClass()
O método css funciona bem quando são poucas as propriedades que queremos alterar, porém quando a complexidade dos estilos aumenta, é melhor trabalhar diretamente com classes, especialmente porque desta maneira conseguimos alternar os estilos. Vamos mudar completamente a apresentação do parágrafo abaixo usando uma classe.
Este parágrafo tem a classe "normal". Vamos adicionar a ele a classe "styling" e ver o que acontece.
// Adicionar classe:
$("#adicionar_classe").click(function(){
$("#paragrafo-classes").addClass("styling");
});
// Remover classe:
$("#remover_classe").click(function(){
$("#paragrafo-classes").removeClass("styling");
});
// Alternar classe:
$("#alternar_classe").click(function(){
$("#paragrafo-classes").toggleClass("styling");
});