Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ch4p0L1N

Código para mudar cor do fundo da página

Por , em Javascript

Recommended Posts

Ch4p0L1N    0

Ch4p0L1N
Postado

Coloquei aqueles links com o codigo onclick="document.bgColor='#005680' pra mudar a cor do fundo da página quando o usuário clicar, mas queria deixar um tom de azul como default, quando o cara entrar é o azul que vai estar de fundo, eu tinha especificado isso no CSS, com background-color mas dessa forma o CSS não deixa o JavaScript mudar, tive que tirar essa tag do CSS pra funcionar, mas aí o fundo fica branco, tem alguma forma de deixar o azul como default e mudar quando o usuário clicar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alaerte Gabriel    662

Alaerte Gabriel
Postado

Poderia ser assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.fundo{
background-color:#0000FF;
}
.fundo1{
background-color:#003333;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function trocar(){
var obj=document.getElementById('corpo');
if(obj.className==''){
	obj.className='fundo';
}else{
	obj.className='fundo1';
 }
}
//-->
</script>
</head>

<body id="corpo" class="fundo">
<a href="#" onclick="trocar();">Troque a cor</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ch4p0L1N    0

Ch4p0L1N
Postado

Poderia ser assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.fundo{
background-color:#0000FF;
}
.fundo1{
background-color:#003333;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function trocar(){
var obj=document.getElementById('corpo');
if(obj.className==''){
	obj.className='fundo';
}else{
	obj.className='fundo1';
 }
}
//-->
</script>
</head>

<body id="corpo" class="fundo">
<a href="#" onclick="trocar();">Troque a cor</a>
</body>
</html>
entendi, mas como ficaria se eu quiser colocar várias opções de cor?

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Aqui tens mais um exemplo, desta vez com multiplos background's, basta você adicionar ao vector a lista que quer:

java script:

<script language="javascript" type="text/javascript">
<!--

var backgroundColor = new Array(); 

backgroundColor[0] = '#FF0000';
backgroundColor[1] = '#00FF00';
backgroundColor[2] = '#0000FF';
backgroundColor[3] = '#FFFFFF';

function changeBackground(whichColor){
document.bgColor = backgroundColor[whichColor];
}

//-->
</script>
HTML:

<a href="#" onclick="java script: changeBackground(0);">Change</a>

<a href="#" onclick="java script: changeBackground(1);">Change1</a>

<a href="#" onclick="java script: changeBackground(2);">Change2</a>

<a href="#" onclick="java script: changeBackground(3);">Change3</a>
Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito