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

Question

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

一个独立于框架的方法会很好,因为我正在编写一个独立运行的脚本,但这当然不是必需的.

背景:我正在尝试调整CKEditor的字体选择器插件(源于此处),以便它始终显示当前光标位置的字体大小(与仅在span具有显式font-size集合的情况下相反,这是当前行为).

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');

更多信息:

• 获取样式(QuirksMode)

编辑:感谢@Crescent Fresh,@ kangax和@Pekka的评论.

变化:

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