¿Cómo cambio el color de fondo con JavaScript?

No necesita AJAX para esto, solo un script java simple que establezca la propiedad background-color del elemento body, como esto:

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

Si desea hacerlo como si fuera iniciado por el servidor, tendría que sondear el servidor y luego cambiar el color en consecuencia.

Estoy de acuerdo con el póster anterior en que cambiar el color por className es un enfoque más bonito. Mi argumento sin embargo es que un className puede ser considerado como una definición de "por qué quieres que el fondo sea este o aquel color."

Por ejemplo, hacerlo rojo no es solo porque lo quieres rojo, sino porque quieres informar a los usuarios de un error. Como tal, establecer el nombre de clase AnErrorHasOccured en el cuerpo sería mi implementación preferida.

En css

body.AnErrorHasOccured
{
  background: #f00;
}

En JavaScript:

document.body.className = "AnErrorHasOccured";

Esto le deja las opciones de estilo más elementos de acuerdo con este className. Y como tal, al establecer un className le das a la página un cierto estado.

AJAX obtiene datos del servidor usando Javascript y XML de manera asíncrona. A menos que quiera descargar el código de color del servidor, ¡eso no es lo que realmente busca!

Pero de lo contrario puede establecer el fondo CSS con Javascript. Si estás usando un framework como jQuery, será algo como esto:

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

De lo contrario, esto debería funcionar:

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

Puede hacerlo de las siguientes maneras PASO 1

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

Para cambiar el fondo de CUERPO

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

Para cambiar un elemento con ID

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

Para elementos de la misma clase

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

Realmente no clasificaría esto como "AJAX". De todos modos, algo como seguir debería hacer el truco:

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

Enfoque Css:

Si quieres ver color continuo, usa 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;
    }
  }  

Si quieres verlo más rápido o más lento, cambia 10 segundos a 5 segundos, etc.

Puede cambiar el fondo de una página simplemente usando:

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

Sin embargo, el siguiente script cambiará el fondo de la página después de cada 3 segundos usando la función 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);
        })

LEER MÁS

DEMO

Preferiría ver el uso de una clase css aquí. Evita tener códigos de colores / hex difíciles de leer en javascript.

document.body.className = className;

Esto cambiará el color de fondo de acuerdo con la elección del usuario seleccionado en el menú desplegable:

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>

Agregue este elemento script a su elemento body, cambiando el color como desee:

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

Pero le gustaría configurar el color del cuerpo antes de que exista el elemento <body>. De esa manera tiene el color correcto desde el principio.

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

Esto puede ponerlo en el <head> del documento o en su archivo js.

Aquí hay un buen color para jugar.

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

Sugeriría el siguiente 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>

Si desea usar un botón o algún otro evento, simplemente use esto en JS:

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

Puede cambiar el fondo de una página simplemente usando:

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

Read more @ Cambiando el Color de fondo

Esta es una codificación simple para cambiar el fondo usando javascript

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