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

¿Alguien sabe un método simple para intercambiar el color de fondo de una página web usando JavaScript?

Modificar la propiedad de JavaScript document.body.style.background.

Por ejemplo:

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

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

Nota: esto depende un poco de cómo se organice su página, por ejemplo, si está utilizando un contenedor DIV con un color de fondo diferente, tendrá que modificar el color de fondo en lugar del cuerpo del documento.

No necesita AJAX para esto, solo un script java simple que configura la propiedad de color de fondo del elemento del cuerpo, como este:

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 classNamees un enfoque más bonito. Sin embargo, mi argumento es que a classNamepuede considerarse como una definición de "por qué quieres que el fondo sea de este o de ese color".

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

En css

body.AnErrorHasOccured
{
  background: #f00;
}

En JavaScript:

document.body.className = "AnErrorHasOccured";

Esto te deja las opciones de diseñar más elementos de acuerdo con esto className. Y como tal, al establecer un classNametipo de le da a la página un cierto estado.

AJAX está obteniendo datos del servidor usando Javascript y XML de forma asincrónica. A menos que desee 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á utilizando un marco como jQuery, será algo como esto:

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

De lo contrario, esto debería funcionar:

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

Puedes 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 del 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 con 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 lo siguiente debería hacer el truco:

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

Enfoque CSS:

Si desea ver un color continuo, 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;
    }
  }  

Si desea verlo más rápido o más lento, cambie 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 utilizando 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 colores difíciles de leer / códigos hexadecimales 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 de script a su elemento del cuerpo, cambiando el color como desee:

<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>

Pero querrá configurar el color del cuerpo antes de <body>que exista el elemento. 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 <head>el 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;
}

Leer más @ Cambiar el color de fondo

Alternativamente, si desea especificar el valor del color de fondo en notación rgb, intente

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

donde a, b, c son los valores de color

Ejemplo:

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

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

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