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?

Answer 1

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.