获取 JS 中 DOM 元素的计算字体大小

Posted 2023-02-16

【中文标题】获取 JS 中 DOM 元素的计算字体大小

【英文标题】：Get computed font size for DOM element in JS

【发布时间】：2010-12-29 15:05:53

【问题描述】：

考虑到其他地方的通用设置（例如在body 标签中）、继承的值等，是否可以检测 DOM 元素的计算 font-size？

独立于框架的方法会很好，因为我正在编写一个应该独立工作的脚本，但这当然不是必需的。

背景：我正在尝试调整 CKEditor's 字体选择器插件（来源 here），使其始终显示当前光标位置的字体大小（而不是仅在具有明确的font-size 设置，这是当前的行为）。

【问题讨论】：

“计算”为像素大小？

对于当前场景：仅像素，但总的来说，能够同时获得定义的值 (px,pt,em) 和像素值会​​非常好。

@Pekka：如果只有像素，你就很好。 pt、em 等是不可能的，只有 IE 的 currentStyle 才能做到。

【参考方案1】：

您可以尝试使用非标准 IE element.currentStyle 属性，否则您可以寻找 DOM Level 2 标准 getComputedStyle 方法（如果可用）：

function getStyle(el,styleProp) 
  var camelize = function (str) 
    return str.replace(/\-(\w)/g, function(str, letter)
      return letter.toUpperCase();
    );
  ;

  if (el.currentStyle) 
    return el.currentStyle[camelize(styleProp)];
   else if (document.defaultView && document.defaultView.getComputedStyle) 
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
   else 
    return el.style[camelize(styleProp)]; 
  

用法：

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

更多信息：

Get Styles (QuirksMode)

编辑：感谢 @Crescent Fresh、@kangax 和 @Pekka 的 cmets。 p>

变化：

添加了camelize 函数，因为包含连字符的属性（如font-size）必须在currentStyle IE 对象上以驼峰式（例如：fontSize）的形式访问。 在访问getComputedStyle之前检查document.defaultView是否存在。 添加了最后一种情况，当el.currentStyle和getComputedStyle不可用时，通过element.style获取内联CSS属性。

【讨论】：

这看起来不错，会试试看。

小心，currentStyle 和 getComputedStyle 根本不同：erik.eae.net/archives/2007/07/27/18.54.15 getComputedStyle 无法获得 inherited 样式，并且总是 computes 它为px，该值是否声明为px。

感谢您的警告。很高兴知道。如上所述，对于手头的工作来说这很好。

实际上是document.defaultView.getComputedStyle，而不是window.getComputedStyle（MDC 弄错了，或者认为它自己的——Mozilla——仅实现）。 getComputedStyle 被指定为 document.defaultView 实现的 AbstractView 的成员，并且确实不能保证 window == document.defaultView （无论是在规范中，还是在实践中；事实上，Safari 2.x 就是一个很好的例子window != document.defaultView)。有趣的是，PPK 在您链接到的 getstyles 文章中犯了类似的错误（在 window 上测试 defaultView）。

已排序。 @CMS，如果我没记错的话，您需要编辑您的答案以指出 currentStyle 将仅接受骆驼化属性（例如 fontSize），而 getPropertyValue 使用原始形式（字体大小）。

【参考方案2】：

当你使用 $('#element')[.css][1]('fontSize') 时，看起来 jQuery（至少 1.9）使用 getComputedStyle() 或 currentStyle 本身，所以如果你可以使用 jQuery，你真的不必为更复杂的解决方案而烦恼。

在 IE 7-10、FF 和 Chrome 中测试

【讨论】：

或更简单的：$('mySelector').css('font-size')

【参考方案3】：

为了克服 'em' 问题，我快速编写了一个函数，如果 ie 中的字体大小是 'em'，该函数将使用正文字体大小进行计算。

        function getFontSize(element)
        var size = computedStyle(element, 'font-size');
        if(size.indexOf('em') > -1)
            var defFont = computedStyle(document.body, 'font-size');
            if(defFont.indexOf('pt') > -1)
                defFont = Math.round(parseInt(defFont)*96/72);
            else
                defFont = parseInt(defFont);
            
            size = Math.round(defFont * parseFloat(size));
         
        else if(size.indexOf('pt') > -1)
            size = Math.round(parseInt(size)*96/72)
        
        return parseInt(size);
    

    function computedStyle(element, property)
        var s = false;
        if(element.currentStyle)
            var p = property.split('-');
            var str = new String('');
            for(i in p)
                str += (i > 0)?(p[i].substr(0, 1).toUpperCase() + p[i].substr(1)):p[i];
            
            s = element.currentStyle[str];
        else if(window.getComputedStyle)
            s = window.getComputedStyle(element, null).getPropertyValue(property);
        
        return s;