Confusions with CSS and JavaScript relations ?

Question

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 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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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().