Question

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

独立于框架的方法会很好，因为我正在开发一个独立运行的脚本，但当然这不是必需的。

背景：我正在尝试调整CKEditor's字体选择器插件（源here），以便它始终显示当前光标位置的字体大小（而不是仅在{{{ 1}}具有明确的span集合，这是当前的行为。）

Answer 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 的评论。

的变化：

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

Answer 2

为了克服'em'问题，我已经快速编写了一个函数，如果ie中的字体大小为'em'，则函数用body字体大小计算。

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

Answer 3

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

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

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

3 个答案: