How can I get the actual inherited CSS of an element using JavaScript?

Question

Using JavaScript, how can I get the actual value for a CSS property which is inherited?

For example, consider the following HTML:

<p><span style="font-size:24pt;">Test #1</span></p>
<p style="font-size:24pt;">Test <span style="font-weight:bold;">#2</span></p>

Using the jQuery code $('p span').css('fontSize') will yield 32px not 24pt because it uses getComputedStyle which returns the used value, not the actual inherited value. But sometimes the style will be directly on the element I am targeting, sometimes it will be inherited.

Here is a test case. How can I get the actual inherited CSS of an element using JavaScript?

The issue here is that the value is being converted to pixels. 32px is 24pt. reeddesign.co.uk/test/points-pixels.html Check this demo: jsfiddle.net/mvqPE/1 — gen_Eric
– gen_Eric, Commented Apr 2, 2012 at 20:06
@Rocket: Right. That's exactly the issue I am trying to solve :-p and that's what I mean by actual vs used value — Josh
– Josh, Commented Apr 2, 2012 at 20:15
Pretty sure you can't get the "actual" value (short of reading the style attribute). stackoverflow.com/a/1314845 — gen_Eric
– gen_Eric, Commented Apr 2, 2012 at 20:18
You have no idea what I am doing @laymanje. In fact you're completely wrong. I am developing a print layout system and the inline styles are placed there by my CMS. — Josh
– Josh, Commented Apr 2, 2012 at 20:57

Community · Accepted Answer · 2017-05-23 11:49:02Z

2

The answer by @mikerobi would satisfy your test case, but to be more specific the only CSS properties exposed by the browsers are from getComputedStyle, so if it's wrong there that's about as good as it gets. See this answer from another question for more detail.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 2, 2012 at 20:07

Alex Vidal

4,10822 silver badges23 bronze badges

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

1 Comment

Arjan Over a year ago

(Seems the reference to mikerobi is is a bit outdated?)

Collectives™ on Stack Overflow

How can I get the actual inherited CSS of an element using JavaScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related