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 ?

i am iterating elements by rows something like this, var rows = getElementById('table_id').getElementsByTagName('tr') for(var i=0;............) rows[i].getElementsByTagName('td') — Anil Namde, May 31 '10 at 12:58

score 3 · Accepted Answer · edited May 23 '17 at 10:24

3

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.

edited May 23 '17 at 10:24

Community

1
1

answered May 31 '10 at 12:55

Pekka

442,112
142
972
1,088

thanks very nice answer ..... helped but does this also mean that if browser does not support it it cant be fetched ? – Anil Namde May 31 '10 at 13:22
@Anil yes, but the solution in the answer I link to will work in all major browsers. – Pekka May 31 '10 at 14:05
thanks :) as you have said it looks nice in all major browsers. – Anil Namde May 31 '10 at 15:01

score 2 · Answer 2 · answered May 31 '10 at 12:52

2

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.

answered May 31 '10 at 12:52

Robusto

31,447
8
56
77

agree but background facilitates to provide more than one background property right ? – Anil Namde May 31 '10 at 12:56
1

The difference between `background` and `background-color` won't make a difference here, as both would be computed into the `backgroundColor` property. – Pekka May 31 '10 at 12:56

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 31 '10 at 12:57

Dormilich

927
5
11

it would be a miracle, if it did. besides, IE is not known for implementing DOM Specs correctly. – Dormilich May 31 '10 at 13:02

Confusions with CSS and JavaScript relations?

3 Answers3