How to get element color which has no background?

Question

How to efficiently get color of element which has no background, but one of his parent has? For example this is 3 levels depth set:

• TOP1 is red
• TOP2 is green
• TOP3 doesn't have a background color defined, yet it is green.

I have no problem writing a function to iretate through parents and find backgroundColor property but I believe it's not really reliable and cross browserly would suck.

UPDATE

I may want to clarify why I want such a thing.

One of my cases: I am building sticky header for a table which will clone the first set of columns of a table and stick them(position: fixed) when user scrolls very wide table. So they can see the columns they are viewing.

Sometimes table has styles associated with it and columns have colors which may be inherited from table, it's container or actually anywhere. That's why I insist on using JavaScript solution on this.

Answer 1

There is no way to calculate the background of TOP3. If its background is not set, it is transparent. As such, it has the color of whatever is below it.

Example:

 <div style="background: red; width: 100px; height: 100px"> TOP1 <div style="background: green; width: 80px; height: 80px"> TOP2 <div style="width: 60px; height: 100px; border: solid 1px yellow"> TOP3 </div> </div> </div> 

Preview:

Here, TOP3 is half green, half white. No CSS value can tell you this.