Como altero a cor do plano de fundo com JavaScript?

Alguém conhece um método simples para trocar a cor de fundo de uma página da Web usando JavaScript?

Modifique a propriedade JavaScript document.body.style.background.

Por exemplo:

function changeBackground(color) {
   document.body.style.background = color;
}

window.addEventListener("load",function() { changeBackground('red') });

Nota: isso depende um pouco de como sua página é montada, por exemplo, se você estiver usando um contêiner DIV com uma cor de fundo diferente, será necessário modificar a cor de fundo disso em vez do corpo do documento.

Você não precisa do AJAX para isso, apenas alguns scripts java simples configurando a propriedade background-color do elemento body, assim:

document.body.style.backgroundColor = "#AA0000";

Se você quiser fazê-lo como se tivesse sido iniciado pelo servidor, seria necessário pesquisar o servidor e alterar a cor de acordo.

Concordo com o pôster anterior de que mudar a cor classNameé uma abordagem mais bonita. Meu argumento, porém, é que umclassName pode ser considerada como uma definição de "por que você deseja que o plano de fundo seja dessa ou daquela cor".

Por exemplo, torná-lo vermelho não é apenas porque você o quer vermelho, mas porque você deseja informar os usuários sobre um erro. Como tal, definindo o classNameAnErrorHasOccured no corpo seria minha implementação preferida.

Em css

body.AnErrorHasOccured
{
  background: #f00;
}

Em JavaScript:

document.body.className = "AnErrorHasOccured";

Isso deixa as opções de estilizar mais elementos de acordo com isso className. E, como tal, ao definir um classNametipo de dado para a página, um determinado estado.

O AJAX está obtendo dados do servidor usando Javascript e XML de maneira assíncrona. A menos que você queira baixar o código de cores do servidor, não é isso que você realmente deseja!

Caso contrário, você pode definir o plano de fundo CSS com Javascript. Se você estiver usando uma estrutura como o jQuery, será algo como isto:

$('body').css('background', '#ccc');

Caso contrário, isso deve funcionar:

document.body.style.background = "#ccc";

Você pode fazer isso das seguintes maneiras: PASSO 1

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

Para mudar o fundo do corpo

document.body.style.backgroundImage=imageUrl  //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color

Para alterar um elemento com ID

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor 

para elementos com a mesma classe

   var elements = document.getElementsByClassName("ClassName")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

Eu realmente não classificaria isso como "AJAX". De qualquer forma, algo como o seguinte deve fazer o truque:

document.body.style.backgroundColor = 'pink';

Abordagem CSS:

Se você deseja ver cores contínuas, use este código:

body{
    background-color:black;
    animation: image 10s infinite alternate;
    animation:image 10s infinite alternate;
    animation:image 10s infinite alternate;
}

@keyframes image{
    0%{
background-color:blue;
}
25%/{
    background-color:red;
}
50%{
    background-color:green;
}
75%{

    background-color:pink;
}
100%{
    background-color:yellow;
    }
  }  

Se você quiser vê-lo mais rápido ou mais devagar, altere 10 segundos para 5 segundos etc.

Você pode alterar o plano de fundo de uma página usando simplesmente:

document.body.style.background = #000000; //I used black as color code

No entanto, o script abaixo alterará o plano de fundo da página a cada 3 segundos, usando a função setTimeout ():

$(function() {
            var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];

            setInterval(function() { 
                var bodybgarrayno = Math.floor(Math.random() * colors.length);
                var selectedcolor = colors[bodybgarrayno];
                $("body").css("background",selectedcolor);
            }, 3000);
        })

LEIA MAIS

DEMO

Eu preferiria ver o uso de uma classe css aqui. Evita ter difícil ler cores / códigos hexadecimais em javascript.

document.body.className = className;

Isso mudará a cor do plano de fundo de acordo com a escolha do usuário selecionado no menu suspenso:

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">
    <option></option>
    <option value="red">Red</option>
    <option value="ivory">Ivory</option>
    <option value="pink">Pink</option>
</select>

Adicione este elemento de script ao elemento do corpo, alterando a cor conforme desejado:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
    <option>Select</option>
    <option style="background-color: #CD5C5C;">#CD5C5C</option>
    <option style="background-color: #F08080;">#F08080</option>
    <option style="background-color: #FA8072;">#FA8072</option>
    <option style="background-color: #E9967A;">#E9967A</option>
    <option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>

Mas você deseja configurar a cor do corpo antes que o <body>elemento exista. Dessa forma, ele tem a cor certa desde o início.

<script>
    var myColor = "#AAAAAA";
    document.write('\
        <style>\
            body{\
                background-color: '+myColor+';\
            }\
        </style>\
    ');
</script>

Você pode colocar isso no <head>documento ou no seu arquivo js.

Aqui está uma bela cor para brincar.

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

Eu sugeriria o seguinte código:

<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>

se você deseja usar um botão ou algum outro evento, use isso em JS:

document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});

Você pode alterar o plano de fundo de uma página usando simplesmente:

function changeBodyBg(color){
    document.body.style.background = color;
}

Leia mais @ Alterando a cor do plano de fundo

Como alternativa, se você desejar especificar o valor da cor de fundo na notação rgb, tente

document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

onde a, b, c são os valores da cor

Exemplo:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';

Esta é uma codificação simples para alterar o plano de fundo usando javascript

<body onLoad="document.bgColor='red'">