logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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");
    });

                    
                

Índice de Aulas