Como alterar as propriedades de CSS com jQuery

Neste post irie ensinar a como alterar o CSS de um elemento HTML utilizando apenas jQuery.

Vamos lá,

Para mudar as propriedades de CSS com jQuery é bem simples, iremos utilizar a seguinte função:

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

Temos a função “css()”, que recebe dois parâmetros, primeiro a propriedade que desejamos alterar e o segundo, que seria o novo valor desejado.

Você pode utilizar a função apenas com nome da propriedade, para saber qual é o valor atual.

var background = $("p").css("background-color");alert( background );

Obviamente, antes de utilizar a função, você tem que ter carregado na sua página o jQuery.

Aconselho que você utilize Google Hosted Librarys para carregar o jQuery, além de outras bibliotecas do javascript.

---

Exemplo:

Clique nos quadrados abaixo para saber qual é o valor da propriedade.

 

 

 

 

Altere pare qualquer propriedade válida de CSS:

 

---

Trabalhando com várias propriedades

Existe também a opção de alterar varias propriedades ao mesmo tempo, veja o exemplo:

$("p").css({"background-color": "blue", "font-size": "12px"});

Retornado os valores de varias propriedades em um array.

var propriedades = $( "#myDiv").css([  "float", "font-size", "text-align", "background-size"]);

Para você obter mais informações sobre a função “css()” consulte a documentação oficial no link: http://api.jquery.com/css/