Confusions with CSS and JavaScript relations?

I have table cell which has class "cellActive". Which has following defination

.cellActive{background:"#DDDDDD"}

Now i am trying to read the background color property for the cell and it comes null/"".

var bgColor = cell.style.backgroundColor; // returning ""

Is that something mistake on my part of its by behavior. If CSS class 开发者_StackOverflow社区is assigning CSS to element can't we read its value in JS ? Does this mean that if we are not assigning property directly to the element we cant get it if in case its inheriting it ?

The style attribute contains only explicitly set properties, not those inherited from a class. You need the so-called "computed style" that reflects the properties the way they were actually rendered.

See the accepted answer to this question for a very good cross-browser solution.

There is a difference between "background" and "background-color". Also, the "style" property means the style property of the element has been set in either HTMl or Javascript. Use "computedStyle" for other cases. That means using the getComputedStyle() method, which you can learn about here.

there are various ways to access CSS in JavaScript Element.style actually accesses what is written to the style attribute. to get the full CSS rather use getComputedStyle().