jQuery - Obter e definir classes CSS
Com jQuery, é fácil manipular o estilo dos elementos.
jQuery Manipulando CSS
jQuery tem vários métodos para manipulação de CSS. Veremos os seguintes métodos:
addClass()- Adiciona uma ou mais classes aos elementos selecionadosremoveClass()- Remove uma ou mais classes dos elementos selecionadostoggleClass()- Alterna entre adicionar/remover classes dos elementos selecionadoscss()- Define ou retorna o atributo de estilo
Exemplo de folha de estilo
A seguinte folha de estilo será usada para todos os exemplos nesta página:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
Método jQuery addClass()
O exemplo a seguir mostra como adicionar atributos de classe a diferentes elementos. Claro que você pode selecionar vários elementos, ao adicionar classes:
Exemplo
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Você também pode especificar várias classes dentro do addClass()método:
Exemplo
$("button").click(function(){
$("#div1").addClass("important blue");
});
Método jQuery removeClass()
O exemplo a seguir mostra como remover um atributo de classe específico de diferentes elementos:
Exemplo
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Método jQuery toggleClass()
O exemplo a seguir mostrará como usar o toggleClass()método jQuery. Este método alterna entre adicionar/remover classes dos elementos selecionados:
Exemplo
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Método jQuery css()
O método jQuery css()será explicado no próximo capítulo.
Exercícios de jQuery
Referência CSS jQuery
Para uma visão geral completa de todos os métodos CSS do jQuery, acesse nossa Referência HTML/CSS do jQuery .