web-dev-qa-db-fra.com

Comment changer la couleur de fond avec JavaScript?

Quelqu'un connaît une méthode simple pour échanger la couleur d'arrière-plan d'une page Web en utilisant JavaScript?

javascriptcss
115
Anders

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

Par exemple:

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

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

Remarque: cela dépend un peu de la façon dont votre page est construite. Par exemple, si vous utilisez un conteneur DIV avec une couleur d'arrière-plan différente, vous devrez en modifier la couleur plutôt que le corps du document.

169
user7094

Vous n'avez pas besoin de AJAX pour cela, vous avez juste un script Java qui définit 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 était initié par le serveur, vous devrez interroger le serveur puis changer la couleur en conséquence.

44
Simon Lehmann

Je suis d'accord avec l'affiche précédente pour dire que changer la couleur de className est une approche plus jolie. Mon argument, cependant, est que className peut être considéré comme une définition de "pourquoi vous voulez que le fond soit de telle ou telle couleur". 

Par exemple, le rendre rouge n’est pas simplement parce que vous le voulez, mais parce que vous souhaitez 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.

En css

body.AnErrorHasOccured
{
  background: #f00;
}

En JavaScript:

document.body.className = "AnErrorHasOccured";

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

18
Martin Kool

AJAX obtient les données du serveur en utilisant Javascript et XML de manière asynchrone. Sauf si vous souhaitez télécharger le code de couleur à partir du serveur, ce n'est pas ce que vous visez!

Mais sinon, vous pouvez définir l'arrière-plan CSS avec Javascript. Si vous utilisez un framework tel que jQuery, cela ressemblera à ceci:

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

Sinon, cela devrait fonctionner:

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

Vous pouvez le faire des manières suivantes ÉTAPE 1  

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

Pour changer de fond deCORPS

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 de même classe 

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

Je ne dirais pas que cela s'appelle "AJAX". Quoi qu'il en soit, quelque chose comme suit devrait faire l'affaire: 

document.body.style.backgroundColor = 'pink';
3
Duncan Smart

Css approche:

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 voir plus vite ou plus lentement, changez 10 secondes en 5 secondes, etc.

3
Deniz.parlak

Vous pouvez changer le fond d'une page en utilisant simplement:

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

Toutefois, le script ci-dessous modifiera l'arrière-plan de la page toutes les 3 secondes à l'aide de 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 LA SUITE

D&EACUTE;MO

2
defau1t

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

document.body.className = className;
2
redsquare

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

2
Ritam Das

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

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

1
james.garriss

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

Ceci vous pouvez le 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);
0
gaby de wilde

Vous pouvez changer le fond d'une page en utilisant simplement:

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

Read more @ Changement de la couleur de fond

0
jonathan klevin

Sinon, si vous souhaitez spécifier la valeur de la couleur de fond en notation rgb, 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)';
0
Divakar Rajesh

si vous souhaitez utiliser un bouton ou un autre événement, utilisez-le simplement dans JS:

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

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>
0
joel hills