Retrieving background-color Property of CSS Elements
This tutorial was tested on Internet Epxloer 7 and Firefox 2 and Opera 9 on Windows XP

This tutorial describes a method for retrieving the background-color values of a html element. As usual, there are differenes between browsers on how to retrieve the color; and even the color value itself has inconsistent syntax.

In Mozilla browsers (like Firefox), the color can be retrieved using:

getComputedStyle(element, psedoStyleString).

This is the recommended way as it is likely to be in the W3C standard (currently in recommendation) in

For example, to get the background-color for this <div>,

A <div> with yellow background rgb(255,255,0) or #ffff00.

you'd use:
var element=document.getElementById("testDiv");
var style=window.getComputedStyle(element,"");
var bgColor=style.getPropertyValue("background-color");

Try it (does not work on Internet Explorer 7 but works on Opera 9) - this example will show the result in a pop up window. On mine the result is rgb(255,255,0).

Internet Explorer 7 does not support getComputedStyle, instead, we can use:


Try it (does not work on Mozilla browsers) but works on Opera 9.

The example will show the result in a pop up window. On mine the result is #ffff00.

So now we have a way to get the color, but the value is represented in different syntax. The return value here is the string used in the style definition, so if the definition is using rgb(255,255,0) in the style definition, rgb(255,255,0) would have been the return value. Confused? Oh joy we'll handle this nonsense later!

Now, combining the two methods:

function getBgColor(element) 
  if (element.currentStyle)
    return element.currentStyle.backgroundColor;
  if (window.getComputedStyle)
    var elementStyle=window.getComputedStyle(element,"");
    if (elementStyle)
      return elementStyle.getPropertyValue("background-color");
  // Return 0 if both methods failed.  
  return 0;
Converting the Color to Values Into A Format We Can Use For Calculation

Say you want to make the background color brighter (for example for mouse over effect), then having different format makes things difficult. I encountered this problem, and wrote this function that converts the two formats into red, green and blue components. Assuming we have a variable color (the same function can be used for foreground color as well, that can either be in rgb(redValue, greenValue, blueValue) or #rrggbb format:

function convertColor(color)
  var rgbColors=new Object();
/////////////////////////////////// // Handle rgb(redValue, greenValue, blueValue) format ////////////////////////////////// if (color[0]=='r') { // Find the index of the redValue. Using subscring function to // get rid off "rgb(" and ")" part. // The indexOf function returns the index of the "(" and ")" which we
// then use to get inner content. color=color.substring(color.indexOf('(')+1, color.indexOf(')')); // Notice here that we don't know how many digits are in each value, // but we know that every value is separated by a comma. // So split the three values using comma as the separator. // The split function returns an object. rgbColors=color.split(',', 3); // Convert redValue to integer rgbColors[0]=parseInt(rgbColors[0]); // Convert greenValue to integer rgbColors[1]=parseInt(rgbColors[1]); // Convert blueValue to integer
rgbColors[2]=parseInt(rgbColors[2]); } //////////////////////////////// // Handle the #RRGGBB' format ////////////////////////////////
else if (color.substring(0,1)=="#") { // This is simples because we know that every values is two // hexadecimal digits. rgbColors[0]=color.substring(1, 3); // redValue rgbColors[1]=color.substring(3, 5); // greenValue rgbColors[2]=color.substring(5, 7); // blueValue // We need to convert the value into integers, // but the value is in hex (base 16)! // Fortunately, the parseInt function takes a second parameter // signifying the base we're converting from. rgbColors[0]=parseInt(rgbColors[0], 16); rgbColors[1]=parseInt(rgbColors[1], 16); rgbColors[2]=parseInt(rgbColors[2], 16); } return rgbColors; }

So now we have a converter, the return vvalue is an array. object[0] contains the redValue, object[1] the greenValue, object[2] the blueValue in integers.

A <div> with yellow background rgb(255,255,0) or #ffff00.

Click to test.

Both Internet Explorer 7 and Firefox 2 returns:

Here is a <span> .

Click to test.

Here is a <span> .

Click to test.

Note: color set to transparent element might actually return the string "transparent;" which throws the code out of whack. Also, predefined string color values (i.e.: background-color: red) will return the string "red" which is not convertable by the code above. If you're using the code for general purpose, you need to tweak it to handle special cases like those.