Getting font css property does not work in IE and Firefox with jQuery

Question

When I try to get the whole font style of an element with IE or Firefox with the following code I only get a empty result, but with Chrome and Opera I get "normal normal bold normal 20px/normal arial" as I would have expected.

<!-- HTML -->
<div id="test" style="font: bold 20px arial; color: red;">test</div>

// JS
alert($('#test').css('font'));

Wyh does this happen and how do I get the complete font property otherwise?

FIDDLE: http://jsfiddle.net/mwj12xkv/

Answer 1

You'll have to query the individual font-* properties you're interested in. From the css documentation:

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.