Alguien sabe de un método sencillo para cambiar el color de fondo de una página web con JavaScript?

InformationsquelleAutor Anders | 2008-10-13

17 Comentarios

  1. 182

    Modificar el código JavaScript de la propiedad document.body.style.background.

    Por ejemplo:

    function changeBackground(color) {
       document.body.style.background = color;
    }
    
    window.addEventListener("load",function() { changeBackground('red') });

    Nota: este hace depender un poco sobre cómo su página es poner juntos, por ejemplo, si estás utilizando un DIV contenedor con un fondo diferente color que usted necesitará para modificar el color de fondo de que en lugar de que el cuerpo del documento.

  2. 48

    Usted no necesita AJAX para esto, sólo algunos llanura java script de configuración de la propiedad de color de fondo del elemento de cuerpo, como este:

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

    Si quieres hacerlo como si se inicia el servidor, habría que sondear el servidor y, a continuación, cambiar el color de acuerdo.

    • Para responder literalmente: la pregunta era acerca de cómo cambiar el color de fondo, no todo el fondo.
  3. 18

    Estoy de acuerdo con el anterior cartel que cambiar el color por className es una bonita enfoque. Mi argumento, sin embargo, es que un className puede ser considerada como una definición de «¿por qué quieres que el fondo sea este o ese color».

    Por ejemplo, hacer que el color rojo no es sólo porque usted quiere es rojo, sino porque desea informar a los usuarios de un error. Como tal, la configuración de la clase AnErrorHasOccured en el cuerpo iba a ser mi preferido aplicación.

    En css

    body.AnErrorHasOccured
    {
      background: #f00;
    }

    En JavaScript:

    document.body.className = "AnErrorHasOccured";

    Esto te deja las opciones de estilo más elementos de acuerdo a este className. Y como tal, mediante el establecimiento de un className usted amable de dar a la página un determinado estado.

  4. 9

    AJAX es la obtención de datos desde el servidor usando Javascript y XML asíncrono, de la moda. A menos que usted desea descargar el código de colores desde el servidor, que no es lo que realmente estás buscando!

    Pero de lo contrario se puede establecer el fondo CSS con Javascript. Si usted está usando 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";
  5. 8

    Puede hacerlo en las siguientes maneras
    PASO 1

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

    Para cambiar de fondo de CUERPO

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

    A cambio de un elemento con ID

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

    para los elementos de una misma clase

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

    Yo no realmente de la clase como «AJAX». De todos modos, algo parecido a la siguiente debe hacer el truco:

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

    Enfoque Css:

    Si quieres ver continua color, 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 ver más lento o más rápido, cambio de 10 segundos a 5 segundos etc.

  8. 2

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

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

    Sin embargo, la siguiente secuencia de comandos de cambiar el fondo de la página después de cada 3 segundos, con setTimeout() función:

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

  9. 2

    Yo prefiero ver el uso de una clase css aquí. Evita tener difícil para leer los colores /hex códigos en javascript.

    document.body.className = className;
  10. 2

    Esto va a cambiar el color de fondo de acuerdo a la elección del usuario seleccionado desde el menú desplegable:

    JS:

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

    HTML:

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

  11. 1

    Agregar este elemento de secuencia de comandos de su cuerpo, elemento, cambiar el color deseado:

    HTML:

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

  12. 0

    Pero desea configurar el color de la carrocería antes de la <body> elemento existe. Que forma tiene el color correcto desde el principio.

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

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

    Aquí es un buen color para jugar.

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

    Sugiero 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>
  14. 0

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

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

    Alternativamente, si desea especificar el color de fondo valor en notación rgb, a continuación, 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)';

Dejar respuesta

Please enter your comment!
Please enter your name here