Come cambio il colore di sfondo con JavaScript?

Qualcuno conosce un metodo semplice per scambiare il colore di sfondo di una pagina Web utilizzando JavaScript?

Modifica la proprietà JavaScript document.body.style.background.

Per esempio:

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

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

Nota: questo dipende un po 'dal modo in cui la pagina viene messa insieme, ad esempio se si utilizza un contenitore DIV con un colore di sfondo diverso, sarà necessario modificare il colore di sfondo anziché il corpo del documento.

Non hai bisogno di AJAX per questo, solo un semplice script Java che imposta la proprietà color-background dell'elemento body, in questo modo:

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

Se si desidera farlo come se fosse stato avviato dal server, è necessario eseguire il polling del server e quindi modificare il colore di conseguenza.

Concordo con il precedente poster che cambiare il colore con classNameun approccio più grazioso. La mia tesi, tuttavia, è che a classNamepuò essere considerata una definizione di "perché vuoi che lo sfondo sia questo o quel colore".

Ad esempio, renderlo rosso non è solo perché lo si desidera rosso, ma perché si desidera informare gli utenti di un errore. Di conseguenza, impostare className AnErrorHasOccuredsul corpo sarebbe la mia implementazione preferita.

Nel css

body.AnErrorHasOccured
{
  background: #f00;
}

In JavaScript:

document.body.className = "AnErrorHasOccured";

Questo ti lascia le opzioni di stile più elementi secondo questo className. E come tale, impostando un classNametipo di dare alla pagina un certo stato.

AJAX sta ottenendo i dati dal server utilizzando Javascript e XML in modo asincrono. A meno che tu non voglia scaricare il codice colore dal server, non è quello a cui stai veramente mirando!

Ma altrimenti puoi impostare lo sfondo CSS con Javascript. Se stai usando un framework come jQuery, sarà qualcosa del genere:

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

Altrimenti, questo dovrebbe funzionare:

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

Puoi farlo nei seguenti modi PASSO 1

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

Per cambiare lo sfondo di BODY

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

Per modificare un elemento con ID

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

per elementi con la stessa classe

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

Non lo classificherei davvero come "AJAX". Comunque, qualcosa come il seguente dovrebbe fare il trucco:

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

Approccio CSS:

Se vuoi vedere il colore continuo, usa questo codice:

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 vuoi vederlo più velocemente o più lentamente, cambia da 10 secondi a 5 secondi ecc.

Puoi cambiare lo sfondo di una pagina semplicemente usando:

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

Tuttavia, lo script seguente cambierà lo sfondo della pagina ogni 3 secondi usando la funzione 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);
        })

LEGGI DI PIÙ

DEMO

Preferirei vedere l'uso di una classe CSS qui. Evita di avere colori / codici esadecimali difficili da leggere in JavaScript.

document.body.className = className;

Questo cambierà il colore di sfondo in base alla scelta dell'utente selezionato dal menu a discesa:

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>

Aggiungi questo elemento script al tuo elemento body, modificando il colore come desiderato:

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

Ma vorresti configurare il colore del corpo prima che l' <body>elemento esista. In questo modo ha il colore giusto sin dall'inizio.

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

Puoi inserirlo nel <head>documento o nel tuo file js.

Ecco un bel colore con cui giocare.

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

Vorrei suggerire il seguente codice:

<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 desideri utilizzare un pulsante o qualche altro evento, usa questo in JS:

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

Puoi cambiare lo sfondo di una pagina semplicemente usando:

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

Leggi di più @ Modifica del colore di sfondo

In alternativa, se si desidera specificare il valore del colore di sfondo nella notazione rgb, provare

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

dove a, b, c sono i valori di colore

Esempio:

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

Questa è una semplice codifica per cambiare lo sfondo usando javascript

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