How do I change the background color with JavaScript?

Question

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

score 241 · Accepted Answer · edited Jun 29 '19 at 21:21

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

For example:

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

window.addEventListener("load",function() { changeBackground('red') });

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.

score 76 · Answer 2 · answered Oct 13 '08 at 14:27

76

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.

answered Oct 13 '08 at 14:27

Simon Lehmann

10,737
4
41
53

2

For answering literally: the question was about changing the color of the background, not all of the background. – Wolf Jul 23 '15 at 11:31
1

This didn't work for me unless I put just "background" instead of "backgroundColor" – Rusca8 Jan 09 '21 at 09:33

score 21 · Answer 3 · edited Aug 16 '17 at 13:17

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.

score 12 · Answer 4 · answered Oct 13 '08 at 14:30

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";

score 11 · Answer 5 · answered Feb 26 '15 at 05:10

You can do it in following ways STEP 1

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

For changing background of BODY

document.body.style.backgroundImage=imageUrl  //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color

To change an element with ID

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor

for elements with same class

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

score 5 · Answer 6 · answered Oct 13 '08 at 14:27

5

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

document.body.style.backgroundColor = 'pink';

answered Oct 13 '08 at 14:27

Duncan Smart

31,172
10
68
70

score 5 · Answer 7 · edited Sep 04 '16 at 10:34

5

Css approach:

If you want to see continuous colour, use this 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;
    }
  }

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

edited Sep 04 '16 at 10:34

Ozgur

3,738
17
34

answered Sep 04 '16 at 09:16

Deniz.parlak

53
1
7

I voted up because I like this answer. Even though it doesn't technically answer the OP question of using Javascript, it does solve the problem, in a nice way. If the page is using JS to do other document mods as well, then it would make sense to also do this in JS, but if this is the only sort of animation being done, then the CSS is a nicer approach over JS. – mike May 19 '23 at 21:54

score 4 · Answer 8 · answered Nov 02 '12 at 11:27

You can change background of a page by simply using:

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

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

$(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);
        })

READ MORE

DEMO

You need quotes on that number though – Rusca8 Jan 09 '21 at 09:31 — Rusca8, Jan 09 '21 at 09:31

score 3 · Answer 9 · edited Oct 28 '15 at 12:27

3

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

document.body.className = className;

edited Oct 28 '15 at 12:27

Zakaria Acharki

66,747
15
75
101

answered Oct 13 '08 at 14:48

redsquare

78,161
20
151
159

score 3 · Answer 10 · answered Feb 22 '18 at 11:14

3

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

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

answered Feb 22 '18 at 11:14

Alex

163
3
11

score 2 · Answer 11 · edited Aug 16 '17 at 13:19

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>

james.garriss · Answer 12 · 2018-02-01T12:16:20.603

2

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

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

edited Feb 01 '18 at 12:16

answered Feb 01 '11 at 17:41

james.garriss

12,959
7
83
96

Divakar Rajesh · Answer 13 · 2021-04-21T09:16:21.890

2

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

document.getElementById("yourid").style.backgroundColor = `rgb(${a}, ${b}, ${c})`;

where a,b,c are the color values

Example:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';

edited Apr 21 '21 at 09:16

answered Nov 12 '18 at 05:13

Divakar Rajesh

1,140
2
18
23

score 2 · Answer 14 · answered Apr 01 '20 at 15:10

<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
    <option>Select</option>
    <option style="background-color: #CD5C5C;">#CD5C5C</option>
    <option style="background-color: #F08080;">#F08080</option>
    <option style="background-color: #FA8072;">#FA8072</option>
    <option style="background-color: #E9967A;">#E9967A</option>
    <option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>

Where's your explanation and moreover, how is this any different from the other answers? — j08691, Apr 01 '20 at 15:14

score 2 · Answer 15 · edited Apr 10 '22 at 11:12

Here are 2 ways to Change Background Color Using Javascript

To change background color with javascript you can apply style.background or style.backgroundColor on the element you want to change background for.

The below example changes the background color of the body when you click an element using style.background property.

function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }

<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>

Another approach could be by adding a CSS class using javascript that gives a background to the element it is attached.

You can see more ways to add class using javascript but here you can simply use classList.add() property.

    function addClass(yourClass){
        document.body.classList.remove("sky", "pink");
        document.body.classList.add(yourClass);
    }

    .pink {
        background: pink;
    }

    .sky {
        background: skyblue;
    }

    <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
    <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

score 1 · Answer 16 · answered Sep 29 '21 at 06:55

1

so you can done very easily by just calling a function like

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

answered Sep 29 '21 at 06:55

salik saleem

769
5
25

That doesn't work. – Quentin Jul 05 '23 at 06:13

gaby de wilde · Answer 17 · 2013-10-03T02:04:13.273

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);

score 0 · Answer 18 · edited Aug 16 '17 at 13:20

0

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>

edited Aug 16 '17 at 13:20

Nathan Arthur

8,287
7
55
80

answered Jan 22 '15 at 07:14

joel hills

9
2

score 0 · Answer 19 · answered Mar 28 '18 at 05:11

0

You can change background of a page by simply using:

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

Read more @ Changing the Background Color

answered Mar 28 '18 at 05:11

jonathan klevin

193
1
2

score -1 · Answer 20 · edited Jul 05 '23 at 06:12

-1

It can be achieved using

document.body.style.color.backgroundColor = "#000000";

edited Jul 05 '23 at 06:12

Quentin

914,110
126
1,211
1,335

answered Jun 23 '22 at 08:27

Mouzam Ali

27
3

No, that doesn't work. – Quentin Jul 05 '23 at 06:12

score -5 · Answer 21 · answered May 03 '21 at 18:41

-5

 <p id="p1">Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <script type="text/javascript">
 document.getElementById("p1").style.color= "#ff0000";  // red
 </script>

answered May 03 '21 at 18:41

moazzams

27
2

4

This does not answer question. This will change the color, not the background color. – 12944qwerty May 03 '21 at 18:49

How do I change the background color with JavaScript?

21 Answers21

Here are 2 ways to Change Background Color Using Javascript

Linked

Related