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/

This may help you http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element — Manwal, Dec 17 '14 at 10:35
You may try to use `$('#test').attr('style')`, then crop the style that belong to `font`. — user2572094, Dec 17 '14 at 10:37

score 5 · Accepted Answer · answered Dec 17 '14 at 10:34

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.

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

1 Answers1

Related