Como alterar as propriedades de CSS com jQuery

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

como alterar as propriedades de CSS com 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.

Teste 1
Teste 2
Teste 3

 

 

 

 

 


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/

 

 

Resumo
Manipulando propriedades de CSS com jQuery
Nome do Artigo
Manipulando propriedades de CSS com jQuery
Descrição
Como alterar as propriedades de CSS com jQuery, de forma simples, utilizando a função "css()"
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Avalie este artigo!

Clique nas estrelas, para dar uma nota de 1 à 5.

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas (Nenhuma avaliação ainda)
Loading...

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *