Comment changer la couleur d'arrière-plan avec JavaScript?

Quelqu'un connaît-il une méthode simple pour permuter la couleur d'arrière-plan d'une page Web à l'aide de JavaScript?

Modifiez la propriété JavaScript document.body.style.background.

Par exemple:

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

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

Remarque: cela dépend un peu de la façon dont votre page est assemblée, par exemple si vous utilisez un conteneur DIV avec une couleur d'arrière-plan différente, vous devrez modifier la couleur d'arrière-plan de celui-ci au lieu du corps du document.

Vous n'avez pas besoin d'AJAX pour cela, juste un simple script Java définissant la propriété background-color de l'élément body, comme ceci:

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

Si vous voulez le faire comme s'il avait été initié par le serveur, vous devrez interroger le serveur, puis changer la couleur en conséquence.

Je suis d'accord avec l'affiche précédente que changer la couleur classNameest une approche plus jolie. Mon argument est cependant qu'unclassName peut être considéré comme une définition de «pourquoi vous voulez que l'arrière-plan soit telle ou telle couleur».

Par exemple, le rendre rouge n'est pas seulement parce que vous le voulez rouge, mais parce que vous souhaitez informer les utilisateurs d'une erreur. En tant que tel, définir le className AnErrorHasOccuredsur le corps serait mon implémentation préférée.

En CSS

body.AnErrorHasOccured
{
  background: #f00;
}

En JavaScript:

document.body.className = "AnErrorHasOccured";

Cela vous laisse la possibilité de styliser plus d'éléments en fonction de cela className. Et en tant que tel, en définissant un, classNamevous donnez en quelque sorte à la page un certain état.

AJAX obtient des données du serveur en utilisant Javascript et XML de manière asynchrone. À moins que vous ne souhaitiez télécharger le code couleur depuis le serveur, ce n'est pas ce que vous visez vraiment!

Mais sinon, vous pouvez définir l'arrière-plan CSS avec Javascript. Si vous utilisez un framework comme jQuery, ce sera quelque chose comme ceci:

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

Sinon, cela devrait fonctionner:

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

Vous pouvez le faire de la manière suivante ÉTAPE 1

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

Pour changer l'arrière-plan du CORPS

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

Pour modifier un élément avec un ID

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

pour les éléments de même classe

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

Je ne classerais pas vraiment cela comme "AJAX". Quoi qu'il en soit, quelque chose comme ce qui suit devrait faire l'affaire:

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

Approche CSS:

Si vous voulez voir une couleur continue, utilisez ce code:

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 vous voulez le voir plus vite ou plus lentement, remplacez 10 secondes par 5 secondes, etc.

Vous pouvez modifier l'arrière-plan d'une page en utilisant simplement:

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

Cependant, le script ci-dessous changera l'arrière-plan de la page toutes les 3 secondes en utilisant la fonction 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);
        })

LIRE PLUS DE

DÉMO

Je préférerais voir l'utilisation d'une classe css ici. Cela évite d'avoir du mal à lire les couleurs / codes hexadécimaux en javascript.

document.body.className = className;

Cela changera la couleur d'arrière-plan en fonction du choix de l'utilisateur sélectionné dans le menu déroulant:

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>

Ajoutez cet élément de script à votre élément de corps, en changeant la couleur comme vous le souhaitez:

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

Mais vous voudrez configurer la couleur du corps avant que l' <body>élément n'existe. De cette façon, il a la bonne couleur dès le départ.

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

Vous pouvez le mettre dans le <head>fichier du document ou dans votre fichier js.

Voici une jolie couleur avec laquelle jouer.

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

Je suggérerais le code suivant:

<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 vous souhaitez utiliser un bouton ou un autre événement, utilisez simplement ceci dans JS:

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

Vous pouvez modifier l'arrière-plan d'une page en utilisant simplement:

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

En savoir plus @ Modification de la couleur d'arrière-plan

Sinon, si vous souhaitez spécifier la valeur de la couleur d'arrière-plan en notation RVB, essayez

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

où a, b, c sont les valeurs de couleur

Exemple:

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

Il s'agit d'un codage simple pour changer d'arrière-plan en utilisant javascript

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