[Webinar] Streamline your web hosting managementRegister Today


Get the background color of a DIV doesn't work

Posted on 2008-01-31
Medium Priority
Last Modified: 2013-11-19

I don't understand where's the problem. The following code displays background color of DIV2 but not the one of DIV1. Please try it.
	#div1{ background-color:#333333}
<div id="div1" >asdf</div>
<div id="div2" style="background-color:#666666">asdf</div>
  window.onload= function(){
    var color1 = document.getElementById("div1").style.backgroundColor;
    var color2 = document.getElementById("div2").style.backgroundColor;

Open in new window

Question by:maya75
  • 2
LVL 19

Accepted Solution

Albert Van Halen earned 500 total points
ID: 20787979
Úse this code
function getStyle(el, styleProp)
	if (el.currentStyle)
		return el.currentStyle[styleProp];
	else if (window.getComputedStyle)
		return document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
var color1 = getStyle(document.getElementById("div1"), "backgroundColor");
var color2 = getStyle(document.getElementById("div2"), "backgroundColor");

Open in new window


Assisted Solution

almilyo earned 500 total points
ID: 20788136
When you type 'document.getElementById("div1")' your're sucking the div1 element from the DOM tree of the html document, its style property only gives you the "inline style" - what is specified in the style attribute, not the css sheet.

You can access the actual style being applied to the element, rather than the inline style for an element with the following code on most browsers:

var color1 = window.getComputedStyle(document.getElementById("div1"),null).backgroundColor;

It won't work on IE though, so try this instead (not 100% certain about this one) if you're using that:

var color1 = window.getCurrentStyle(document.getElementById("div1"),'background-color');


Author Comment

ID: 20788206
Thanks AlbertVanHalen, it works perfect in IE. Do you know if it's possible to do it in Firefox ?

Author Comment

ID: 20788242
Thanks both of you, the first comment works for IE and the second for Firefox.

Thanks again !

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question