Получить вычисленный размер шрифта для элемента DOM в JS
можно ли обнаружить вычисленный font-size
элемента DOM, принимая во внимание общие настройки, сделанные в другом месте (в body
тег, например), унаследованные ценности, и так далее?
независимый от фреймворка подход был бы хорош, так как я работаю над сценарием, который должен работать автономно, но это, конечно, не требование.
фон: я пытаюсь настроить С CKEditor это!--10--> плагин выбора шрифта (source здесь) так что он всегда показывает размер шрифта текущей позиции курсора (в отличие от только тогда, когда в span
это имеет явное font-size
set, который является текущим поведением).
3 ответов
вы можете попробовать использовать нестандартный IE element.currentStyle
собственность, в противном случае вы можете искать DOM Уровень 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)
Edit: спасибо @Crescent Fresh, @kangax и @Pekka за комментарии.
изменения:
- добавил
camelize
функция, так как свойства, содержащие гипены, такие какfont-size
, должен быть доступен как camelCase (например.:fontSize
) наcurrentStyle
IE объект. - проверять наличие
document.defaultView
перед обращениемgetComputedStyle
. - добавлен последний случай, когда
el.currentStyle
иgetComputedStyle
недоступны, получите встроенное свойство CSS черезelement.style
.
чтобы преодолеть проблему "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;
}
похоже, что jQuery (1.9 по крайней мере) использует getComputedStyle()
или currentStyle
сам, когда вы используете $('#element')[.css][1]('fontSize')
, поэтому вам действительно не нужно беспокоиться о более сложных решениях, если вы в порядке с помощью jQuery.
протестировано в IE 7-10, FF и Chrome