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
– Anil Namde, Commented May 31, 2010 at 12:58

Community · Accepted Answer · 2017-05-23 10:24:36Z

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, 2017 at 10:24

CommunityBot

11 silver badge

answered May 31, 2010 at 12:55

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anil Namde Over a year ago

thanks very nice answer ..... helped but does this also mean that if browser does not support it it cant be fetched ?

Pekka Over a year ago

@Anil yes, but the solution in the answer I link to will work in all major browsers.

Anil Namde Over a year ago

thanks :) as you have said it looks nice in all major browsers.

Robusto · Accepted Answer · 2010-05-31 12:52:57Z

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, 2010 at 12:52

Robusto

32k8 gold badges59 silver badges79 bronze badges

2 Comments

Anil Namde Over a year ago

agree but background facilitates to provide more than one background property right ?

Pekka Over a year ago

The difference between background and background-color won't make a difference here, as both would be computed into the backgroundColor property.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered May 31, 2010 at 12:57

Dormilich

9275 silver badges11 bronze badges

1 Comment

Dormilich Over a year ago

it would be a miracle, if it did. besides, IE is not known for implementing DOM Specs correctly.

Collectives™ on Stack Overflow

Confusions with CSS and JavaScript relations?

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related