tutoriais mais recente desenvolvimento web
 

jQuery - Obter e definir Classes CSS

❮ Anterior Próxima Capítulo ❯

Com jQuery, é fácil de manipular o CSS de elementos.


jQuery Manipulando CSS

jQuery tem vários métodos para a manipulação de CSS. Vamos olhar para os seguintes métodos:

  • addClass() - Adiciona um ou mais classes para os elementos selecionados
  • removeClass() - Remove uma ou mais classes de elementos selecionados
  • toggleClass() - Alterna entre adição / remoção de classes a partir dos elementos selecionados
  • css() - Define ou retorna o atributo de estilo

exemplo de estilo

O seguinte estilo vai ser utilizado para todos os exemplos desta página:

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

jQuery addClass() Método

O exemplo a seguir mostra como adicionar atributos de classe para diferentes elementos. Claro que você pode selecionar vários elementos, quando a adição de classes:

Exemplo

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});
Tente você mesmo "

Você também pode especificar várias classes dentro do addClass() método:

Exemplo

$("button").click(function(){
    $("#div1").addClass("important blue");
});
Tente você mesmo "

jQuery removeClass() Método

O exemplo a seguir mostra como remover um atributo de classe específica de diferentes elementos:

Exemplo

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});
Tente você mesmo "

jQuery toggleClass() Método

O exemplo a seguir irá mostrar como usar o jQuery toggleClass() método. Este método alterna entre adicionar / remover classes a partir dos elementos selecionados:

Exemplo

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
Tente você mesmo "

jQuery css() Método

O jQuery css() método será explicado no próximo capítulo.

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»

jQuery CSS Reference

Para uma visão completa de todos os métodos jQuery CSS, por favor, vá ao nosso jQuery HTML / CSS Referência .


❮ Anterior Próxima Capítulo ❯