获取JS中DOM元素的计算字体大小
是否可以检测DOM元素的计算font-size ，考虑在其他地方（例如在body标签中）进行的通用设置，inheritance的值等等？
一个独立于框架的方法会很好，因为我正在研究一个独立运行的脚本，但这当然不是必需的。
背景：我正在尝试调整CKEditor的字体选择器插件（源于此处 ），以便它始终显示当前光标位置的字体大小（而不是仅在具有显式font-size设置的范围内时，这是目前的行为）。
您可以尝试使用非标准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）必须在currentStyleIE对象上以camelCase（例如：fontSize）的forms访问。 - 在访问
getComputedStyle之前检查document.defaultView是否存在。 - 添加了最后一种情况，当
el.currentStyle和getComputedStyle不可用时，通过element.style获取内联CSS属性。
为了克服’em’问题，我已经快速编写了一个函数，如果ie中的字体大小为’em’，则函数用body字体大小计算。
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; }
当你使用$('#element')[.css][1]('fontSize') ，看起来jQuery（至少1.9）使用getComputedStyle()或currentStyle本身，所以你真的不应该为更复杂的烦恼而烦恼解决方案，如果你可以使用jQuery。
在IE 7-10，FF和Chrome中测试过