是否有可能检测到font-size
DOM 元素的计算,考虑到其他地方的通用设置(body
例如在标签中)、继承的值等?
独立于框架的方法会很好,因为我正在编写一个应该独立工作的脚本,但这当然不是必需的。
背景:我正在尝试调整CKEditor 的字体选择器插件(来源here),以便它始终显示当前光标位置的字体大小(而不是仅在span
具有显式font-size
设置的 a 中时,这是当前行为)。
是否有可能检测到font-size
DOM 元素的计算,考虑到其他地方的通用设置(body
例如在标签中)、继承的值等?
独立于框架的方法会很好,因为我正在编写一个应该独立工作的脚本,但这当然不是必需的。
背景:我正在尝试调整CKEditor 的字体选择器插件(来源here),以便它始终显示当前光标位置的字体大小(而不是仅在span
具有显式font-size
设置的 a 中时,这是当前行为)。
您可以尝试使用非标准 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.currentStyle
和getComputedStyle
不可用时,通过element.style
.看起来像 jQuery(至少 1.9)在您使用时使用getComputedStyle()
或currentStyle
本身$('#element')[.css][1]('fontSize')
,所以如果您可以使用 jQuery,您真的不必为更复杂的解决方案而烦恼。
在 IE 7-10、FF 和 Chrome 中测试
为了克服“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;
}