36

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

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

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

4

3 回答 3

58

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

用法:

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

更多信息:

编辑:感谢@Crescent Fresh@kangax@Pekka的评论。

变化:

  • 添加camelize的功能,因为包含连字符的属性,如font-size,必须fontSizecurrentStyleIE 对象上以驼峰式(例如:)的形式访问。
  • document.defaultView在访问之前检查getComputedStyle.
  • 添加了最后一种情况,当el.currentStylegetComputedStyle不可用时,通过 . 获取内联 CSS 属性element.style
于 2009-12-23T20:33:20.193 回答
4

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

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

于 2013-04-11T03:12:27.110 回答
2

为了克服 '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;
    }
于 2011-06-22T22:30:00.240 回答