Obter e definir classes CSS no jQuery

Através do jQuery, é fácil operar elementos CSS.

Operações de CSS no jQuery

O jQuery possui vários métodos para operações de CSS. Vamos aprender os seguintes:

  • addClass() - Adicionar uma ou mais classes aos elementos selecionados
  • removeClass() - Remover uma ou mais classes dos elementos selecionados
  • toggleClass() - Realizar a troca de adição/remoção de classes nos elementos selecionados
  • css() - Definir ou retornar atributo de estilo

Tabela de estilos de exemplo

A seguinte tabela de estilos será usada para todos os exemplos dessa página:

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

Método jQuery addClass()

O exemplo a seguir mostra como adicionar a propriedade class a diferentes elementos. Claro, você também pode selecionar vários elementos ao adicionar classes:

Exemplo

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

Experimente você mesmo

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

Exemplo

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

Experimente você mesmo

Método jQuery removeClass()

O exemplo a seguir demonstra como remover a propriedade class de diferentes elementos:

Exemplo

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

Experimente você mesmo

Método jQuery toggleClass()

O exemplo a seguir mostrará como usar o método jQuery toggleClass(). Este método realiza a troca de adição/remoção de classes nos elementos selecionados:

Exemplo

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

Experimente você mesmo

Método jQuery css()

Vamos explicar o método jQuery css() no próximo capítulo.

Manual de Referência do jQuery HTML

Para obter conteúdo completo sobre métodos jQuery CSS, acesse nossa Manual de Referência do jQuery CSS