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

153

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

Por ejemplo:

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

<BODY onload="changeBackground('red');">

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

Fuente

2008-10-13 14:27:01

3

Realmente no clasificaría esto como "AJAX". De todos modos, después de algo así como debe hacer el truco:

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

Fuente

2008-10-13 14:27:50

38

No es necesario AJAX para esto, sólo algunas java script sencillo establecer la propiedad background-color del elemento del cuerpo, así:

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

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

Fuente

2008-10-13 14:27:56

+1

Para responder literalmente: la pregunta era sobre cambiar el color del fondo, no todo el fondo. – Wolf

9

AJAX está obteniendo datos del servidor utilizando Javascript y XML de manera asincrónica. ¡A menos que quiera descargar el código de color del servidor, eso no es lo que realmente está buscando!

De lo contrario, puede establecer el fondo CSS con Javascript. Si va a utilizar un framework como jQuery, que va a ser algo como esto:

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

De lo contrario, esto debería funcionar:

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

Fuente

2008-10-13 14:30:23 Oli

2

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

document.body.className = className;

Fuente

2008-10-13 14:48:57 redsquare

18

Estoy de acuerdo con el comentario anterior que el cambio del color por className es un enfoque más bonita. Mi argumento, sin embargo, es que un className se puede considerar como una definición de "por qué quieres que el fondo sea de ese color".

Por ejemplo, que sea rojo no es solo porque lo quiere rojo, sino porque desea informar a los usuarios de un error. Como tal, establecer la className 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 esta className. Y como tal, estableciendo un className le da a la página un cierto estado.

Fuente

2008-10-13 15:03:17

1

Añadir este elemento de secuencia de comandos para el elemento del cuerpo, cambiando el color que se desea:

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

Fuente

2011-02-01 17:41:54

2

Puede cambiar el fondo de una página por el simple uso:

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

Sin embargo, la secuencia de comandos siguiente cambiará el fondo de la página cada 3 segundos con 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); 
     })

READ MORE

DEMO

Fuente

2012-11-02 11:27:23 defau1t

0

Pero que se quiere configurar el color de la carrocería 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 se puede poner en el <head> del documento o en el archivo JS.

Aquí hay un buen color para jugar.

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

Fuente

2013-10-02 19:27:02

0

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

Fuente

2015-01-22 07:14:07

3

usted puede hacerlo de las siguientes formas 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 los elementos con misma clase

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

Fuente

2015-02-26 05:10:11

-2

Esta es la codificación simple para cambiar de fondo usando javascript

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

Fuente

2016-06-13 08:12:32

3

Css aplicación Roach:

Si desea ver el color continua, utilice 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 usted quiere ver que sea más rápido o más lento, cambio del 10 segundo a 5 segundo, etc.

Fuente

2016-09-04 09:16:28

1

Esto cambiará el color de fondo de acuerdo a 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>

Fuente

2017-03-25 11:39:22

0

si desea utilizar un botón o algún otro evento, justo use esto en JS:

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

Fuente

2018-02-22 11:14:57 Alex

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

Respuesta

Cuestiones relacionadas