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

Posted 2023-05-09

【中文标题】如何获取由 css 设置的元素的字体大小

【英文标题】：How can I get the font size of an element as it was set by css

【发布时间】：2010-11-21 18:56:22

【问题描述】：

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

有什么方法可以让我使用 javascript 获取原始 CSS 设置的字体大小值吗？您的方法对跨浏览器的友好程度如何？

提前致谢！

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

【问题讨论】：

什么浏览器会出现这种情况？

Safari WebKit 4 nightly、FF 3.5 (OS X/Win)、IE 6、Chrome 2 (Win)

【参考方案1】：

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

只有 IE 的currentStyle 功能才能做到这一点。不幸的是，jQuery 在这种情况下对你起作用，甚至让 IE 在px 中报告计算的大小（它使用 Dean Edwards 的this hack 这样做，你可以自己检查the source）。

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

【讨论】：

永远不要说“不可能” :-)（除非你真的很确定）

【参考方案2】：

在 Chrome 中：

var rules = window.getMatchedCs-s-rules(document.getElementById('target'))

返回一个Cs-s-ruleList 对象。需要对此进行更多实验，但看起来如果m < n 则rules[n] 处的CSSStyleRule 会覆盖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 中的每个CSSStyleSheet sheet。遍历sheet 中的CSSStyleRules（忽略CSSImportRules）并通过document.getElementById('target').querySelector(rule.selectorText) 针对目标元素测试每个规则。然后应用与上面相同的正则表达式......但这只是一个猜测，我还没有测试过它或任何东西......

【参考方案3】：

这个 jQuery 插件看起来可以解决问题：

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

Github: jQuery-Pixel-Em-Converter

【参考方案4】：

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

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

【讨论】：

parseInt 已经丢弃了第一个非数字字符之后的所有内容，所以这是等价的： val = parseInt(str);返回（val == NaN）？ 0 : 值；