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

问：

是否可以检测 DOM 元素的计算，同时考虑在其他地方进行的通用设置（例如在标记中）、继承的值等？font-sizebody

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

背景：我正在尝试调整 CKEditor 的字体选择器插件（来源在这里），以便它始终显示当前光标位置的字体大小（而不是仅在具有显式集的情况下，这是当前行为）。spanfont-size

javascript jquery css ckeditor 字体大小

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

变化：

添加了函数，因为包含连字符的属性（如）必须在 IE 对象上作为 camelCase（例如：）访问。camelizefont-sizefontSizecurrentStyle
在访问之前检查是否存在。document.defaultViewgetComputedStyle
添加了最后一种情况，当和不可用时，通过获取内联 CSS 属性。el.currentStylegetComputedStyleelement.style

它实际上是，不是（MDC弄错了，或者只考虑自己的Mozilla实现）。被指定为的成员，它实现了，并且实际上无法保证（无论是在规范中，还是在实践中;事实上，Safari 2.x 就是一个很好的例子）。有趣的是，PPK 在您链接到的 getstyles 文章中犯了类似的错误（在上进行测试）。document.defaultView.getComputedStylewindow.getComputedStylegetComputedStyleAbstractViewdocument.defaultViewwindow == document.defaultViewwindow != document.defaultViewdefaultViewwindow

2赞 Pekka 12/24/2009

排序。@CMS，如果我没记错的话，您需要编辑您的答案以指出它只接受骆驼化属性（例如 fontSize），而使用原始形式（font-size）。currentStylegetPropertyValue

2赞 Frans Dutch 6/23/2011 #2

为了克服“em”问题，我快速编写了一个函数，如果 ie 中的 font-size 是 'em'，则该函数使用正文 font-size 进行计算。

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

4赞 Tom Auger 4/11/2013 #3

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

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

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

Get computed font size for DOM element in JS

评论

评论

评论