0

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.

4

1 回答 1

1

起初我认为问题在于您正在搜索element而不是element-7，这是在您的鼠标下显示的内容，并且您对 Chromeelement.style显示的内联 CSS 信息感到困惑。如果您的图像与您的代码匹配，这将有所帮助。

然后我在jsfiddle中进行了测试，发现这不是问题。问题是您看待事物的两种方式都使用计算值。用户代理将您的字体大小转换为整数，如果您查看计算值，您就会被困住。

Chrome 开发人员工具所做的是直接查看您输入到 DOM 中的内容，而不是计算值。（如果你在 fiddle 或你自己的测试中查看那个 div，你会发现 font-size 的计算值与 element.style 的值不同。）所以，做同样的事情，不要看计算值：

alert(labelElement.style.fontSize);

给你你想要的。你可以在 jQuery 中做到这一点，但它实际上更丑 - 你必须获取样式属性然后解析字符串 -alert($("element-7").attr("style");将是第一步，但解析它以获取字体大小将需要更多的努力。

我没有在 css 或 html 规范中找到任何说明用户代理需要处理浮点像素的内容。我在规范中看到的所有使用像素的字体大小示例都使用整数。我发现John Resig 的博客说浮点像素不实用。这就是为什么您不断将 int 值作为计算值返回的原因 - 浮点像素不是标准的一部分。

于 2013-09-23T15:21:59.830 回答