一尘不染

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

javascript

是否可以font-size考虑到其他地方(body例如在标记中)进行的常规设置,继承的值等来检测DOM元素的计算结果?

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

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


阅读 1257

收藏
2020-05-01

共1个答案

一尘不染

您可以尝试使用非标准IE element.currentStyle属性,否则,可以查找DOM Level2标准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(如fontSize)的属性必须作为currentStyleIE对象上的camelCase(例如:)来访问。
  • document.defaultView在访问之前检查的存在getComputedStyle
  • 添加了最后一种情况,当el.currentStylegetComputedStyle不可用时,可通过获得内联CSS属性element.style
2020-05-01