get css values inherited of a given div, by javascript

Question

Given a DIV of a page, I would like to get by Javascript what is the stylesheet inherit for the A elements.

So, for example

<html>
<head>
BODY { font-size:18px; }
A { color: red; }
#layer A { color: green; }
</head>

<div id="layer">
<a href="xxx">yyy</a>
</div>

</body>
</html>

I would like a JS function like getStyle("layer", "a") and it returns me "font-size:18px;color: green;" , that is all the styles applied to that element of that div, inherited from all the stylesheet.

Thank you !

excuse me, i don't know what you are talking about ... can't you reply to this ? i don't know what to do ... other questions I did had no problems ... seriously, what do i have to do ! :( — FlamingMoe
– FlamingMoe, Commented Mar 7, 2011 at 21:10
Please go to your previous asked questions and click the answer check next to the answer which helped you. — pimvdb
– pimvdb, Commented Mar 7, 2011 at 21:11
Thanks. Anyway, this question might help you: stackoverflow.com/questions/1169967/…. — pimvdb
– pimvdb, Commented Mar 7, 2011 at 21:15
Yes, I was there, but it's not the same ... I need the inherited styles inside a given DIV of a given tag — FlamingMoe
– FlamingMoe, Commented Mar 7, 2011 at 21:18

pimvdb · Accepted Answer · 2011-03-07 21:24:24Z

3

getComputedStyle is what you're looking for.

I made this on JSFiddle: http://jsfiddle.net/6MmAf/1/

<div id="layer">
<a href="xxx" id="thelink">yyy</a>
</div>

BODY { font-size:18px; }
A { color: red; }
#layer A { color: green; }

window.alert(
    getComputedStyle(
        document.getElementById('thelink')
    ).fontSize
);
// it alerts 18px, which is inherited from BODY in css

answered Mar 7, 2011 at 21:24

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

2 Comments

FlamingMoe Over a year ago

THANK YOU, but as I specified, I need the complete css applied to that element, therefore "font-size:18px;color: green;" :P Besides, I can not modified the original HTML

PIoneer_2 Over a year ago

the updated MDN link: developer.mozilla.org/en-US/docs/Web/API/Window/…

Collectives™ on Stack Overflow

get css values inherited of a given div, by javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related