Manipular o CSS

O jQuery permite manipular o estilo dos elementos de uma página de uma forma simples.

O 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 dos elementos selecionados
• toggleClass(): Alterna entre a adição / remoção de classes dos elementos selecionados
• css(): Define ou retorna o atributo de estilo

addClass()

Adiciona um ou mais classes para os elementos selecionados.

Exemplo :
Considere-se seguinte folha de estilos:

estilos.css

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

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

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

Também se pode especificar várias classes dentro do método addClass():

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

removeClass()

Remove uma ou mais classes dos elementos selecionados.

Exemplo :

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

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

toggleClass()

Alterna entre a adição / remoção de classes dos elementos selecionados.

Exemplo :

O exemplo a seguir mostra como usar o método toggleClass(). Este método alterna entre a adição / remoção de classes dos elementos selecionados:

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

css()

O css() define ou retorna uma ou mais propriedades de estilo para os elementos selecionados.

Sintaxe :

Para ler o estilo dos elementos selecionados:

css("propertyname");

Para definir o estilo dos elementos selecionados:

css("propertyname","value");

Para definir várias propriedades CSS:

css({"propertyname":"value","propertyname":"value",…});

Exemplo 1:

O exemplo a seguir irá retornar o valor cor de fundo do elemento selecionado PRIMEIRO:

$("p").css("background-color");

Exemplo 2:

O exemplo a seguir irá definir o valor de cor de fundo para todos os elementos <p>:

$("p").css("background-color","yellow");

Exemplo 3:

O exemplo a seguir irá definir a cor de fundo e tamanho da fonte para todos os elementos <p>:

$("p").css({"background-color":"yellow","font-size":"200%"});