Javascript change la couleur d'arrière-plan sur le clic

Je suis un peu nouveau pour la programmation et j'essaie d'apprendre de nouvelles méthodes et méthodes …

Pouvez-vous me montrer un Javascript qui permet de changer la couleur de la couleur d'arrière-plan de la page à une autre. Par exemple, j'ai une couleur d'arrière-plan bleue et je veux la changer en vert. La couleur doit être changée lorsque l'utilisateur clique sur l'arrière-plan et déclenche l'événement.

Aussi … la même chose pour une Div, changez de couleur sur le clic, mais après 10 secondes, elle retournerait à la couleur initiale. C'est quelque chose avec ClearInterval, mais je ne suis pas un expert … alors.

Je vous remercie…

Si vous souhaitez modifier la couleur d'arrière-plan sur le bouton, vous devez utiliser la fonction JavaScript et modifier un style dans la page HTML.

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

C'est une fonction en JavaScript pour modifier la couleur, et vous allez appeler cette fonction dans votre événement, par exemple:

 <input type="button" onclick="chBackcolor('red');">

Je recommande d'utiliser jQuery pour cela.

Si vous ne le souhaitez que pendant quelques secondes, vous pouvez utiliser la fonction setTimeout :

 window.setTimeout("chBackColor()",10000);

Vous pouvez définir la couleur d'arrière-plan d'un objet à l'aide de CSS.

Vous pouvez également utiliser JavaScript pour joindre les gestionnaires de clics aux objets et ils peuvent modifier le style d'un objet en utilisant element.style.property = 'value'; . Dans l'exemple ci-dessous, je l'ai attaché dans le code HTML à un bouton, mais le gestionnaire a également été ajouté à l'élément du corps ou défini entièrement dans JavaScript.

 body { background-color: blue; }

 <button onclick="document.body.style.backgroundColor = 'green';">Green</button>

Vous trouverez ici des solutions pour vos problèmes.

 document.body.style.height = '500px'; document.body.addEventListener('click', function(e){ var self = this, old_bg = this.style.background; this.style.background = this.style.background=='green'? 'blue':'green'; setTimeout(function(){ self.style.background = old_bg; }, 1000); })

http://jsfiddle.net/ea1xf3sx/

Vous pouvez définir la couleur de fond du corps en utilisant document.body.style.backgroundColor = "red"; De sorte que cela peut être mis dans une fonction appelée lorsque l'utilisateur clique. La partie suivante peut être effectuée en utilisant document.getElementByID("divID").style.backgroundColor = "red"; window.setTimeout("yourFunction()",10000); Qui appelle votre fonction dans 10 secondes pour changer la couleur.

Je vous suggère d'apprendre à propos de Jquery, la plus populaire bibliothèque JS. Avec jquery, il est simple d'accomplir ce que vous voulez. Exemple d'exemple ci-dessous:

 $(“#DIV_YOU_WANT_CHANGE”).click(function() { $(this).addClass(“.your_class_with_new_color”); });

tu peux le faire—

 <input type="button" onClic="changebackColor"> function changebackColor(){ document.body.style.backgroundColor = "black"; document.getElementByID("divID").style.backgroundColor = "black"; window.setTimeout("yourFunction()",10000); }

Vous pouvez utiliser setTimeout() :

 var addBg = function(e) { e = e || window.event; e.preventDefault(); var el = e.target || e.srcElement; el.className = 'bg'; setTimeout(function() { removeBg(el); }, 10 * 1000); //<-- (in miliseconds) }; var removeBg = function(el) { el.className = ''; };

 div { border: 1px solid grey; padding: 5px 7px; display: inline-block; margin: 5px; } .bg { background: orange; }

 <body onclick='addBg(event);'>This is body <br/> <div onclick='addBg(event);'>This is div </div> </body>