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

Question

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

Answer 1

Modifiez la propriété JavaScript `` .

Par exemple :

Il s’agit de JavaScript pur, rien à voir avec AJAX  :)

Remarque : cela dépend un peu comment votre page est mis en place, par exemple si vous utilisez une balise div avec une couleur d’arrière-plan différente que vous devrez modifier la couleur de fond de cette place le corps du document.

Answer 2

Vous n’avez pas besoin AJAX pour ce faire, juste quelques script java plain affectant à la propriété de couleur d’arrière-plan de l’élément body, comme ceci :

Si vous voulez faire comme si il a été initié par le serveur, vous devrez interroger le serveur et changez la couleur en conséquence.

Answer 3

Je suis d'accord avec le commentaire précédent que la modification de la couleur par le nom de classe est une belle approche. Mon argument est cependant qu'une classe peut être considérée comme une définition de la "pourquoi vous voulez l'arrière-plan d'être ceci ou cela de la couleur".

Par exemple, rendant le rouge n'est pas juste parce que vous voulez dans le rouge, mais parce que vous voulez informer les utilisateurs d'une erreur. En tant que tel, la définition de la classe "AnErrorHasOccured" sur le corps serait mon préféré de mise en œuvre.

Dans le css

body.AnErrorHasOccured
{
  background: #f00;
}

En javascript:

document.body.className = "AnErrorHasOccured";

Cela vous laisse les options de style de plusieurs éléments en fonction de cette classe. Et en tant que tel, par la définition d'une classe que vous kindof donner à la page un certain état.

Answer 4

AJAX est obtenir des données depuis le serveur à l’aide de Javascript et XML de façon asynchrone. Sauf si vous voulez télécharger le code de couleur à partir du serveur, ce n'est pas ce que vous vraiment visez !

Mais dans le cas contraire, vous pouvez définir l’arrière-plan CSS avec Javascript. Si vous utilisez un framework comme jQuery, ça va être quelque chose comme ceci :

Dans le cas contraire, cela devrait fonctionner :

Answer 5

Je n’aurais pas vraiment dans la catégorie cela « AJAX ». En tout cas, quelque chose comme suit devrait faire l’affaire :