Changing css styles with javascript

Question

I know there are already threads on this but I couldn't find an answer to fit my needs. I'm trying to use external JS to change external CSS. I have a very simple CSS body style:

html, body{
background-color: black;
color: white;
}

To change this with JavaScript I tried:

var bg = document.getElementById("body");
body.style.backgroundColor = white;

But that didn't seem to work. I don't have too much experience with CSS combined with JavaScript so I think the fix is something simple but I can't seem to find an answer. Any help would be appreciated.

you are using white, and javascript takes it as variable, it should be a string. eg. 'white'. — Bhavesh G, Commented Jun 14, 2013 at 12:58

Quentin · Accepted Answer · 2013-06-14 12:57:55Z

6

You have lots of problems

var bg = document.getElementById("body"); will get <something id="body"> not <body> (but your CSS is matching <body> so presumably that is what you want to change)
body.style.backgroundColor is using a variable called body not bg (which is what you used before.
= white assigns the value of the variable white, not the string "white".

Corrected code:

var bg = document.body;
bg.style.backgroundColor = "white";

answered Jun 14, 2013 at 12:57

Quentin

948k135 gold badges1.3k silver badges1.4k bronze badges

+1 the only other answer to notice the body ID issue, beat me by 11 seconds :)
– MrCode
Commented Jun 14, 2013 at 13:00
Looks like I'm more rusty than I thought. I tried this code, with adding in bg.style.color = "black"; and the font color changes but not the background.
– Ryan Sayles
Commented Jun 14, 2013 at 14:01

Add a comment |

pandavenger · Accepted Answer · 2013-06-14 12:56:28Z

1

You need to make white a string like "white"

Javascript is reading white as a variable.

answered Jun 14, 2013 at 12:56

pandavenger

1,0257 silver badges21 bronze badges

Add a comment |

ಠ_ಠ · Accepted Answer · 2013-06-14 12:56:35Z

1

You're using the wrong variable!

var bg = document.getElementById("body");
bg.style.backgroundColor = "white";

answered Jun 14, 2013 at 12:56

ಠ_ಠ

3,07830 silver badges43 bronze badges

I guess that the OP wants to change the background color of the body (and not of the element with an ID of body)...
– Samuel Caillerie
Commented Jun 14, 2013 at 12:58
1

Yes I agree, a lot went wrong here. I would agree with @Quentin's answer.
– ಠ_ಠ
Commented Jun 14, 2013 at 12:59

Add a comment |

PSR · Accepted Answer · 2013-06-14 12:56:43Z

1

replace body.style.backgroundColor = white; with

body.style.backgroundColor = 'white';

Here color name must be a string

To change the body back ground color use

 document.body.style.background = 'white';

answered Jun 14, 2013 at 12:56

PSR

40.4k42 gold badges114 silver badges154 bronze badges

Add a comment |

MrCode · Accepted Answer · 2013-06-14 12:58:06Z

0

Has your <body> really got an id="body"?

You can select the body with document.body and use quotes for the colour value:

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

Or a hex colour

document.body.style.backgroundColor = '#ffffff';

answered Jun 14, 2013 at 12:58

MrCode

64.6k10 gold badges94 silver badges114 bronze badges

Add a comment |

wakqasahmed · Accepted Answer · 2013-06-14 12:58:17Z

0

white should be enclosed within single or double quotes

no need to use var bg = document.getElementById("body"); as i dont feel you are using variable bg anywhere

answered Jun 14, 2013 at 12:58

wakqasahmed

2,1091 gold badge18 silver badges23 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Changing css styles with javascript

6 Answers 6

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Your Answer

Sign up or log in

Post as a guest

Related