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

IT技术 javascript jquery css ckeditor font-size
2021-01-17 15:06:44

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

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

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

3个回答

您可以尝试使用非标准 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,必须作为IE 对象fontSize上的驼峰式(例如:)访问currentStyle
  • document.defaultView在访问之前检查getComputedStyle.
  • 添加了最后一种情况,当el.currentStylegetComputedStyle不可用时,通过element.style.
谢谢你的警告。很高兴知道。对于手头的工作,这很好,如上所述。
2021-03-23 15:06:44
实际上document.defaultView.getComputedStyle,不是window.getComputedStyle(MDC 弄错了,或者只考虑了它自己的 — Mozilla — 实现)。getComputedStyle被指定为 的成员AbstractView,它document.defaultView实现了,并且真的不能保证window == document.defaultView(无论是在规范中,还是在实践中;事实上,Safari 2.x 是 的一个很好的例子window != document.defaultView)。有趣的是,PPK 在您链接到的 getstyles 文章中犯了类似的错误(defaultView在 上测试window)。
2021-03-25 15:06:44
排序。@CMS,如果我没记错的话,您需要编辑答案以指出currentStylegetPropertyValue使用原始表单(字体大小)时仅接受骆驼属性(例如 fontSize )。
2021-04-04 15:06:44
这看起来很棒,会尝试一下。
2021-04-07 15:06:44
要小心,currentStyle并且getComputedStyle是完全不同的:erik.eae.net/archives/2007/07/27/18.54.15 getComputedStyle是无法获得的遗传风格,并始终计算px的value是否被宣布为px与否。
2021-04-07 15:06:44

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

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

或更简单地说: $('mySelector').css('font-size')
2021-03-14 15:06:44

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