Mudando o background da div

Como citado no artigo anterior sobre o básico do jQuery, onde falei da possibilidade de mudança de background utilizando jQuery, neste artigo demonstro este efeito.

Veja o exemplo funcionando antes de prosseguir.

A primeira coisa a fazer é colorir o background da div com o CSS.

Supondo que a div tenha um id = "box", o CSS inicial seria este:

<style type="text/css">
   #box { 
   	background:#ccc; 
   	width:300px; 
   	height:200px; 
   }
</style>

Com um background pré-definido com CSS, podemos então criar o código jQuery para mudar esse background.

Se você ainda não está familiarizado com o código abaixo, então não deixe de ver o artigo sobre o básico do jQuery.

<script type="text/javascript">
$(document).ready(function(){
/* ao clicar na div com id="box" executa a função */
$("#box").click(function(){
/* a função muda o background da div com id="box" */
$("#box").css("background","#f00");

});

});
</script>

Não deixem de ler os comentários dentro do código.

Utilizamos o evento click() do jQuery para este efeito e passamos como parâmetro para este evento uma função.

Então ao clicar na div com id="box", a função será executada e o background da div mudará de cor.

O evento click() pode ser utilizado em vários outros efeitos em jQuery, não se prenda apenas a este exemplo e teste outras possibilidades utilizando o evento click().

Uma boa sorte a todos!

Comentários

Dani | 22/02/2016 15:19:00

Como fazer com que ele volte para o vermelho ao clicar novamente?

Josean Matias:

Olá, o mais indicado nesse caso seria você adicionar uma classe CSS de fundo cinza como padrão da DIV e depois trocar a classe por uma de fundo vermelho usando o método "toggleClass" do jquery.

Thiago | 15/12/2015 19:04:25

Olá, é possível fazer isso com um background imagem ao invés de cor? se sim, como devo colocar ali em "("background","#f00")"?

Josean Matias:

olá Tiago, o uso de imagem no background pode ser utilizado usando background:url(ENDERECO_DA_IMAGEM);

Otniel | 19/06/2015 12:59:18

Em cheio, exactamente o que eu estava a procura. Obrigado por partilha conhecimento.

mdj | 23/08/2014 20:38:47
meu querido seu codigo me ajudou muito, mas como eu faria para que trocasse por um determinador tempo. exemplo trocar apos tres ou quatro segundos
Marcos Aurélio R. da Silva | 15/02/2014 16:27:31
Muito bom, este parâmetro me ajudou muito rsrsr...
Sérgio | 18/07/2013 11:41:02
Obrigado pela ajuda.
E se o background for com gradiente e com mais do que uma opção de cor? É possível alterar na mesma?
rafael | 22/05/2012 22:13:35
muito bom

Comentar