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

Vous n'avez pas besoin D'AJAX pour cela, juste un script java simple 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 et ensuite changer la couleur en conséquence.

Je suis d'accord avec l'affiche précédente que changer la couleur par className est une approche plus jolie. Mon argument est cependant qu'un className 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 voulez informer les utilisateurs d'une erreur. En tant que tel, définir le className AnErrorHasOccured sur le corps serait mon implémentation préférée.

Dans css

body.AnErrorHasOccured
{
  background: #f00;
}

Dans JavaScript:

document.body.className = "AnErrorHasOccured";

Cela vous laisse les options de style, plus d'éléments selon ce className. Et en tant que tel, en définissant un className, vous donnez un certain état à la page.

AJAX obtient des données du serveur en utilisant Javascript et XML de manière asynchrone. Sauf si vous voulez télécharger le code couleur à partir du 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 de BODY

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

Pour changer un élément avec ID

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

Pour les éléments d'une 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 suit devrait faire l'affaire:

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

Approche Css:

Si vous voulez voir la 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, changez 10 secondes en 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 après 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

DÉMO

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

document.body.className = className;

Cela va changer la couleur de fond 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 body, 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>

Mais vous voudriez configurer la couleur du corps avant que l'élément <body> 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>

Ce que vous pouvez mettre dans le <head> du document ou dans votre fichier js.

Voici une belle couleur pour jouer avec.

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

Je suggère 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;
}

Lire la suite @ changer la couleur D'arrière-plan

C'est un codage simple pour changer l'arrière-plan en utilisant javascript

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