CODEWITHSUNDEEP
javascriptjqueryhtmlcss
abibock_un
abibock_un

Reputation: 125

need help to get float value of css 'font-size'

I need help to get float value of css 'font-size'. In firefox it works perfect. I have trouble in Chrome, Safari, IE... I try to get this css value but result-less, it converts to int value. I check in two ways: with JQ and pure JS:

My code:

alert('jq: '+$('#element').css('font-size')); // int value

var labelElement = document.getElementById('element');
var fontSize = parseFloat(window.getComputedStyle(labelElement, null).getPropertyValue('font-size'));
alert('pureJS: '+fontSize); // int value

I take screenshot from Chrome, in developer tools it sees font-size in right value.

Screenshot:

Screenshot Anybody knows why it happen?

Thanks so much for any information.

Upvotes: 1

Views: 1660

Answers (1)

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

At first I thought the issue was that you were searching for element instead of element-7, which is what is showing under your mouse, and you were confused by Chrome's element.style showing of inline CSS information. It would help if your image matched your code.

Then I tested in jsfiddle and saw that wasn't the problem. The problem is that the two ways you're looking at things use computed values. The user agent converts your font size to an integer, and if you look at the computed values, you're stuck with that.

What the Chrome developer tools was doing was looking directly at what you entered into the DOM, instead of the computed values. (If you look at that div in the fiddle or your own test, you'll see that the computed value for font-size is not the same as element.style's value.) So, do the same, and don't look at the computed values:

alert(labelElement.style.fontSize);

gives you what you want. You can do it in jQuery, but it's actually uglier - you'd have to get the style attribute and then parse the string - alert($("element-7").attr("style"); would be the first step, but parsing that to get the font-size would take much more effort.

I haven't found anything in the css or html specs that say a user agent needs to handle floating point pixels. All the examples I see for font-size in the spec that use pixels use integers. And I have found a blog from John Resig saying that floating point pixels aren't practical. This would be why you keep getting int values returned as the computed value - float pixels are not part of the standard.

Upvotes: 1

Related Questions