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.
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/