Changing Background Color with JavaScript

Question

I need to change the background of one of my main container divs with Javascript. The end goal is to apply a gradient but I'm having issues just changing background color. Here's the code:

var main = document.getElementById("main");
  main.parentNode.style.maxWidth = 0;
  main.parentNode.style.maxHeight = 0;
  main.parentNode.style.margin = "0px";
  main.style.backgroundColor = "black";

This is what the tag looks like in the browser once the page loads and the JS executes.

<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black;">

I am not getting any JS errors. The JS is executing bc other code runs and the background color is changed in the code but not rendered. The browser I am most concerned about is Safari but I am getting the same effect in Chrome. Any help would be much appreciated.

EDIT: Here's a fiddle: http://jsfiddle.net/hz7AR/

@ExceptionLimeCat the code seems to be fine, I dont see any typos or errors. A demo in jsfiddle would help. — Sajjan Sarkar
– Sajjan Sarkar, Commented Nov 26, 2012 at 20:25
What other CSS do you have for that element? (In your stylesheet) — Dogbert
– Dogbert, Commented Nov 26, 2012 at 20:25
Does the element have anything in it? Maybe you just can't see it. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Nov 26, 2012 at 20:26
Could you please open the Developer tools and hover over the specific div. Is it highlighted correctly (light blue overlay) — Stephan Bönnemann-Walenta
– Stephan Bönnemann-Walenta, Commented Nov 26, 2012 at 20:26

hereandnow78 · Accepted Answer · 2012-11-26 20:27:14Z

4

you are setting the parent container to maxWidth 0 and maxHeight 0. i think there is the problem

answered Nov 26, 2012 at 20:27

hereandnow78

14.5k8 gold badges46 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vedaant Arora · Accepted Answer · 2012-11-26 20:34:50Z

1

You need to set the width and height of your div. Currently the div has no width or height change your html to:

<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black; height: 100px; width: 100px">

That code makes the div 100 x 100 pixels you can set it to whatever you like

answered Nov 26, 2012 at 20:34

Vedaant Arora

2171 silver badge18 bronze badges

1 Comment

ExceptionLimeCat Over a year ago

I tried giving the div a fix height and width but that did not work

Collectives™ on Stack Overflow

Changing Background Color with JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related