How do I change the background color with JavaScript?

后端未结

关注

 19  2238

春和景丽

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

相关标签:

19条回答

北恋

2020-11-22 14:55
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
```
body.AnErrorHasOccured
{
  background: #f00;
}
```
In JavaScript:
```
document.body.className = "AnErrorHasOccured";
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

栀梦

2020-11-22 14:55

I would suggest the following code:

<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 讨论(0)

予麋鹿

2020-11-22 14:57
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.
```
<script>
    var myColor = "#AAAAAA";
    document.write('\
        <style>\
            body{\
                background-color: '+myColor+';\
            }\
        </style>\
    ');
</script>
```
This you can put in the <head> of the document or in your js file.

Here is a nice color to play with.
```
var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-11-22 14:58
You don't need AJAX for this, just some plain java script setting the background-color property of the body element, like this:
```
document.body.style.backgroundColor = "#AA0000";
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

北海茫月

2020-11-22 14:59

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

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>

0 讨论(0)

花落未央

2020-11-22 15:01
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:
```
$('body').css('background', '#ccc');
```
Otherwise, this should work:
```
document.body.style.background = "#ccc";
```
0 讨论(0)
发布评论:

提交评论
- 加载中...