Question

我正在编写一个简单的jQuery，用于将元素的字体大小更改一定百分比。我遇到的问题是，当我使用jQuery的$（'＃el'）。css（'font-size'）获得大小时，它总是返回一个像素值，即使用em设置也是如此。当我使用Javscript的el.style.font-size属性时，它将不会返回值，直到一个值被同一属性显式设置。

有什么方法可以用Javascript获取原始的CSS set font-size值吗？您的方法如何跨浏览器友好？

提前致谢！

编辑：我应该注意所有经过测试的浏览器（请参阅下面的评论）允许我使用上面提到的两种方法使用'em'值设置文本大小，此时jQuery .css（）返回一个等效的'px'值，Javascript .style.fontSize方法返回正确的'em'值。也许最好的方法是在页面加载时初始化元素，立即为它们提供em值。

Answer 1

除IE之外的所有目标浏览器都会向您报告该元素的"Computed Style"。在您的情况下，您不想要知道px的计算font-size大小是什么，而是您希望在样式表中设置值。

只有IE才能通过currentStyle功能实现这一目标。不幸的是，在这种情况下jQuery可以对抗你，甚至让IE报告px中的计算大小（由Dean Edwards使用this hack来执行此操作，您可以检查{{ 3}}你自己）。

简而言之，你想要的是跨浏览器是不可能的。只有IE可以做到（假设您绕过jQuery访问该属性）。您设置内联值（而不是样式表）的解决方案是您可以做的最好的解决方案，因为浏览器不需要计算任何内容。

Answer 2

这个jQuery插件看起来会起作用：

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

Github: jQuery-Pixel-Em-Converter

Answer 3

我曾经遇到过这个问题。我使用此函数来获取css属性的int值（如果有）。

function PBMtoInt(str)
{ 
return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0");
}

Answer 4

在Chrome中：

var rules = window.getMatchedCSSRules(document.getElementById('target'))

返回CSSRuleList个对象。需要对此进行更多实验，但看起来如果m < n那么CSSStyleRule rules[n]会覆盖rules[m]处的for(var i = rules.length - 1; i >= 0; --i) { if(rules[i].style.fontSize) { return /.*(em|ex|ch|rem|vh|vw|vmin|vmax|px|in|mm|cm|pt|pc|%)$/.exec(rules[i].style.fontSize)[1]; } }。所以：

sheets = document.styleSheets

在Firefox中，可以使用StyleSheetList将所有样式表作为CSSStyleSheet sheet，然后迭代sheets中的每个CSSStyleRule。迭代sheet中的CSSImportRule（忽略document.getElementById('target').querySelector(rule.selectorText) s）并通过{{1}}针对目标元素测试每个规则。然后应用与上面相同的正则表达式.....但这只是一个猜测，我没有测试过它或任何东西......

如何获取由css设置的元素的字体大小

4 个答案: