需要帮助来获得css'font-size'的浮点值

Question

我需要帮助来获得css'font-size'的浮点值。在Firefox中，它完美无缺。 我在Chrome，Safari，IE中遇到麻烦...... 我试图得到这个css值但是没有结果，它转换为int值。我检查了两种方式：使用JQ和纯JS：

我的代码：

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

我从Chrome中截取屏幕截图，在开发人员工具中，它看到的字体大小正确。

截图：

有人知道为什么会这样吗？

非常感谢任何信息。

Answer 1

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

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

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

alert(labelElement.style.fontSize);

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

我没有在css或html规范中找到任何说明用户代理需要处理浮点像素的内容。我在font-size in the spec看到的所有使用像素的示例都使用整数。我发现blog from John Resig说浮点像素不实用。这就是为什么你继续获得作为计算值返回的int值的原因 - 浮动像素不是标准的一部分。