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

Get computed font size for DOM element in JS

提问by Pekka

Is it possible to detect the computed font-sizeof a DOM element, taking into consideration generic settings made elsewhere (In the bodytag for example), inherited values, and so on?

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

A framework-independent approach would be nice, as I'm working on a script that should work standalone, but that is not a requirement of course.

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

Background: I'm trying to tweak CKEditor'sfont selector plugin (source here) so that it always shows the font size of the current cursor position (as opposed to only when within a spanthat has an explicit font-sizeset, which is the current behaviour).

背景：我正在尝试调整CKEditor 的字体选择器插件（来源here），以便它始终显示当前光标位置的字体大小（而不是仅在span具有显式font-size设置的 a 中，这是当前行为）。

回答by CMS

You could try to use the non-standard IE element.currentStyleproperty, otherwise you can look for the DOM Level 2standard getComputedStylemethod if available :

您可以尝试使用非标准 IEelement.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)]; 
  }
}

Usage:

用法：

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

More info:

更多信息：

• Get Styles(QuirksMode)

• 获取样式（QuirksMode）

Edit:Thanks to @Crescent Fresh, @kangaxand @Pekkafor the comments.

编辑：感谢@Crescent Fresh、@kangax和@Pekka的评论。

Changes:

变化：

• Added camelizefunction, since properties containing hypens, like font-size, must be accessed as camelCase (eg.: fontSize) on the currentStyleIE object.
• Checking the existence of document.defaultViewbefore accessing getComputedStyle.
• Added last case, when el.currentStyleand getComputedStyleare not available, get the inline CSS property via element.style.

• 添加了camelize功能，因为包含连字符的属性，如font-size，必须作为IE 对象fontSize上的驼峰式（例如：）访问currentStyle。
• document.defaultView在访问之前检查getComputedStyle.
• 添加了最后一种情况，当el.currentStyle和getComputedStyle不可用时，通过element.style.

回答by Tom Auger

Looks like jQuery (1.9 at least) uses getComputedStyle()or currentStyleitself when you use $('#element')[.css][1]('fontSize'), so you really shouldn't have to bother with more complicated solutions if you're OK using jQuery.

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

Tested in IE 7-10, FF and Chrome

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

回答by Frans Dutch

To overcome the 'em' problem I have quickly written a function, if the font-size in ie is 'em' the function calculates with the body font-size.

为了克服“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;
    }