Javascript 如何获得css设置的元素的字体大小

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

有什么方法可以通过Javascript获得原始CSS设置的字体大小值吗？您的方法跨浏览器友好程度如何

提前谢谢

---

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

这个jQuery插件看起来可以做到这一点：

---

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

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

---

除IE外，所有的目标浏览器都会向您报告元素的名称。在您的情况下，您不想知道

font size

的计算

px

大小是多少，而是希望在样式表中设置值

只有IE才能通过它的功能实现这一点。不幸的是，本例中的jQuery对您不利，甚至让IE在

px

中报告计算的大小（Dean Edwards使用它来报告，您可以自己检查）

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

在Chrome中：

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

返回

CSSRuleList

对象。需要对此做更多的实验，但是看起来如果

m

那么

CSSStyleRule

at

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];
    }
}

---

在Firefox中，可以使用

sheets=document.styleSheets

将所有样式表作为

StyleSheetList

获取，然后在

sheets

中迭代每个

csssstylesheet

。迭代

工作表中的
CSSStyleRule
（忽略
CSSImportRule
s）并通过
document.getElementById（'target'）.querySelector（rule.selectorText）
针对目标元素测试每个规则。然后应用与上面相同的regexp。。。。。但这只是一个猜测，我还没有测试过它或其他什么
 在什么浏览器中会发生这种情况？Safari WebKit 4 nightly，FF 3.5（OS X/Win），IE 6，Chrome 2（Win）parseInt已经丢弃了第一个非数字字符后面的所有内容，因此这是等效的：val=parseInt（str）；返回值（val==NaN）？0:val；永远不要说“不可能”：-（除非你真的确定）