Changing CSS of multiple HTMLElement. Imagine you would like to apply CSS styles to more than one element, for example, make the background color of all elements with the class name box lightgreen.Then you can.

1. Background Color Html
2. Background Color Css Fade

1. In Windows 7 and Windows XP it was very easy to change the default background color of all windows to whatever you want. Staring at white window backgrounds all day is hard on the eyes. Once changed, ALL windows of all apps would conform to the custom color as long as the apps allowed the windows bg to be invoked.
2. You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
3. Dec 20, 2018  button, then select Settings > Personalization to choose a picture worthy of gracing your desktop background, and to change the accent color for Start, the taskbar, and other items. The preview window gives you a sneak peek of your changes as you make them. In Background, select a picture or solid color, or create a slideshow of pictures.
4. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666.
5. I would like the button's background color to change according to the color selected from the list box. Each list box item has a content, that is the color it represents, and a background color matches its content.

Anyone know a simple method to swap the background color of a webpage using JavaScript?

kevinjiAndersAnders

17 Answers

Modify the JavaScript property document.body.style.background.

For example:

Note: this does depend a bit on how your page is put together, for example if you're using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body.

Mister Jojo

You don't need AJAX for this, just some plain java script setting the background-color property of the body element, like this:

If you want to do it as if it was initiated by the server, you would have to poll the server and then change the color accordingly.

Simon LehmannSimon Lehmann

I agree with the previous poster that changing the color by className is a prettier approach. My argument however is that a className can be regarded as a definition of 'why you want the background to be this or that color.'

For instance, making it red is not just because you want it red, but because you'd want to inform users of an error. As such, setting the className AnErrorHasOccured on the body would be my preferred implementation.

In css

In JavaScript:

This leaves you the options of styling more elements according to this className. And as such, by setting a className you kind of give the page a certain state.

Nathan ArthurMartin KoolMartin Kool

AJAX is getting data from the server using Javascript and XML in an asynchronous fashion. Unless you want to download the colour code from the server, that's not what you're really aiming for!

But otherwise you can set the CSS background with Javascript. If you're using a framework like jQuery, it'll be something like this:

Otherwise, this should work:

OliOli

You can do it in following waysSTEP 1

For changing background of BODY

To change an element with ID

for elements with same class

Vignesh SubramanianVignesh Subramanian

I wouldn't really class this as 'AJAX'. Anyway, something like following should do the trick:

Duncan SmartDuncan Smart

Css approach:

If you want to see continuous colour, use this code:

If you want to see it faster or slower, change 10 second to 5 second etc.

You can change background of a page by simply using:

However the below script will change the background of the page after every 3 seconds using setTimeout() function:

READ MORE
DEMO

defau1tdefau1t

I would prefer to see the use of a css class here. It avoids having hard to read colors / hex codes in javascript.

Zakaria Acharkiredsquareredsquare

This will change the background color according to the choice of user selected from the drop-down menu:

Nathan Arthur

Add this script element to your body element, changing the color as desired:

james.garrissjames.garriss

But you would want to configure the body color before the <body> element exists. That way it has the right color from the get go.

This you can put in the <head> of the document or in your js file.

Here is a nice color to play with.

Nathan Arthur

if you wish to use a button or some other event, just use this in JS:

You can change background of a page by simply using:

Read more @ Changing the Background Color

Alternatively, if you wish to specify the background color value in rgb notation then try

where a,b,c are the color values

Example:

Divakar RajeshDivakar Rajesh

This is simple coding for changing background using javascript

Tunaki

Not the answer you're looking for? Browse other questions tagged javascriptcss or ask your own question.

I would like to change the background colour of my body on click.

This is my code that I have tried, any help would be appreciated :)

CSS code

Body code

joe_young

6 Answers

You're using a colon instead of a comma. Try:

You also need to wrap the id in quotes or it will look for a variable called #co

There are many more issues here. click isn't an HTML attribute. You want onclick (which is redundant). Try this:

Background Color Html

You were trying to call an undefined method. It looks like you were trying to declare it inside the callback statement? I'm not sure. But please compare this to your code and see the differences.

http://jsfiddle.net/CLwE5/ demo fiddle

Sterling ArcherSterling ArcherYuliam ChandraScript47

1.Remove onclick method from div element

2.Remove function change() from jQuery code and in place of that create an anonymous function like:

fedorquiJRodDynamite

Background Color Css Fade

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtmlcss or ask your own question.