Mudar o fundo do site usando javascript

Front-end JavaScript
#1

Ei pessoal to com uma duvida aqui. É tipo eu tenho um campo de texto e quando eu digitar azul e clicar no botão ok o funda da minha pagina web vai ficar azul, alguém ai sabe como se faz isso???

#2

Olá Gabriel , tudo bem?

Com certeza alguém aqui sabe como se faz isso , más para alguém ter a capacidade de te ajudar precisamos pelo menos ter ideia da estrutura do seu codigo/ideia.
Posta aqui o seu codigo, desta maneira facilita bastante!

Abraço!

#3

Boa tarde amigo gabriel_gomess,

Fiz um modelo simples de como mudar a cor do backgrounda da página utilizando JavaScript e formatação CSS3. Também sou iniciante em Desenvolvimento Web e aproveitei sua dúvida como exercício para estudar JS. Se outros usuários mais experientes tiverem formas melhores de fazer estamos a disposição.

Segue o exemplo que formulei.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf8">
<title>Mudar a cor do Background da página</title>
<script type="text/javascript">
// Função que lê a cor escolhida pelo usuário em <input type="color"> e altera a formatação CSS
// do <body id="pagina"> com a cor escolhida.
function mudar_cor_de_fundo(){
// lê o valor de cor escolhido pelo usuário.
var cor = document.getElementById("seletor_de_cores").value;
// muda a formatação CSS do <body> background para a cor escolhida
document.getElementById("pagina").style.backgroundColor = cor;
// opcional: escreve na página a cor escolhida
document.getElementById("cor_escolhida").innerHTML = "A Cor escolhida é "+cor;
}
</script>
</head>
<body id="pagina">
<form>
<p>Escolha uma cor para o fundo da página</p>
<input id="seletor_de_cores" type="color"/><br><br>
<button type="button" onclick="mudar_cor_de_fundo()">Executar</button>
</form>
<p id="cor_escolhida"></p>
</body>
</html>

Qualquer dúvida estamos ai.

Boa Sorte!

1 curtida
#4

Primeiro agradeço ao meu amigo ricson.brito o codigo deu-me uma ajudinha só que quando parei parei para pensar reparei que fiz a pergunta errada o que eu quero saber é: o usuario digita a cor e o fundo muda, seguirei as instruções do meu amigo Bruno_Pinheiro e postarei o codigo para vocês verem o que a de errado, segue ai:

#5

Ocorreu um erro mas ta ai o codigo:

 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Teste 02</title>
    </head>
    <body id="body">
    <script>
    function mudar(){
    var campo = document.getElementById('n1').value;
    var fundo = document.getElementById('body');
    if(campo == 'azul'){
    fundo.style.background-color = "blue";
    }
    else if(campo == ''){alert('Digite a cor no campo')}
    else{alert('Cor nao encontrada!')}
    }
    </script>
    <form>
    <input type="text" id="n1">
    <input type="submit" onclick="mudar();">
    </form>
    </body>
    </html>**texto em negrito**
#7

Você pode implementar o que está querendo utilizando uma class fundo() no body, mudando a cor de fundo da página manipulando o CSS com o Javascript. Dá só uma olhada: :smiley:

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

<body id="body" class="fundo">
<a href="#" onclick="trocar();">Azul</a> <br/>
<a href="#" onclick="trocar();">Branco</a>
</body>
</html>
</pre>
#8

Blz, brigadão!