Retrieve the background color of an element in a table

Question

I'm having trouble retrieving/determining the background color of a cell in an html table that I had previously colored using css. I want to be able to retrieve that color using javascript and store it into a variable for use further on in my code (not shown).

Here's a jfiddle of what I am attempting to do on a simple scale: http://jsfiddle.net/adtsolutions/6P629/. Code is also provided below:

HTML:

<body>
<table>
    <tr>
        <td>Hello there</td>
        <td id="HDD">I want to know this cell's color</td>
    </tr>
</table>

CSS:

TD {
    TEXT-ALIGN: CENTER;
    BORDER: 2PX SOLID BLACK; 
    BORDER-COLLAPSE: COLLAPSE; 
    BACKGROUND-COLOR: #D0A9F5; 
}

JS:

//document.getElementById("HDD").style.background="#D0A9F5"
var myColor = document.getElementById("HDD").style.background;
alert(myColor);

Right now, I keep getting a "blank" when attempting to display the contents of the variable "myColor", which should be the background color. What I have noticed is that if I un-comment the first line in my javascript, myColor will clearly say what I hoped it would show. Any thoughts on what I may be doing wrong or why this only works if the background color is defined in-line in the javascript? Your constructive help is greatly appreciated!

possible duplicate of [Is it possible to find CSS rules from an HTML node via JavaScript?](http://stackoverflow.com/questions/4482374/is-it-possible-to-find-css-rules-from-an-html-node-via-javascript) — Beat Richartz, Dec 11 '13 at 22:05

score 4 · Answer 1 · answered Dec 11 '13 at 22:08

4

You could use .getComputedStyle() which will return the rgb color:

var theCSSprop = window.getComputedStyle(document.getElementById("HDD"), null).getPropertyValue("background-color");

jsFiddle example

answered Dec 11 '13 at 22:08

j08691

204,283
31
260
272

And for more details about j08691's answer: http://stackoverflow.com/questions/17116909/using-javascript-how-do-i-get-the-background-color-of-a-table-cell-when-i-click – n1kkou Dec 11 '13 at 22:15

score 3 · Accepted Answer · answered Dec 11 '13 at 22:09

You could use jQuery and use the css() method where you can either use $('#selector').css('background-color') or $('#selector').css('backgroundColor') like so:

<div class="test">hello</div>

CSS:

.test {
    background-color:#fff;
    width:100px;
    height:100px;
}

JS:

$( document ).ready(function() {
  var c = $('.test').css( "backgroundColor" );
    alert(c);
});

JSFiddle here: http://jsfiddle.net/E4eBJ/

More information on .css() here on the jQuery docs site: http://api.jquery.com/css/

score 1 · Answer 3 · answered Dec 11 '13 at 22:05

1

Try changing "...style.background;" to "...style.background-color;" I'm not too savvy in JavaScript; but if you're referencing a CSS element in JavaScript maybe background-color would be a more accurate attribute to use.

answered Dec 11 '13 at 22:05

Zulfe

820
7
25

score 0 · Answer 4 · answered Dec 11 '13 at 22:27

JavaScript

var Color = document.getElementById("HDD");

    var myColor = window.getComputedStyle(Color,null).getPropertyValue('background-Color');
    alert(myColor);

Fiddle example: http://jsfiddle.net/6P629/23/

To know more about this refer below link window.getComputedStyle

Retrieve the background color of an element in a table

4 Answers4