CODEWITHSUNDEEP
javascripthtmlcssbackground-color
ExceptionLimeCat
ExceptionLimeCat

Reputation: 6400

Changing Background Color with JavaScript

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/

Upvotes: 0

Views: 2320

Answers (2)

Vedaant Arora
Vedaant Arora

Reputation: 217

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

Upvotes: 1

hereandnow78
hereandnow78

Reputation: 14434

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

Upvotes: 4

Related Questions