Получить вычисленный размер шрифта для элемента DOM в JS - PullRequest
Новая
       48

Получить вычисленный размер шрифта для элемента DOM в JS

29 голосов
/ 23 декабря 2009

Можно ли обнаружить вычисленное font-size элемента DOM, принимая во внимание общие настройки, сделанные в других местах (например, в теге body), унаследованные значения и т. Д.?

Подойдет независимый от фреймворка подход, так как я работаю над сценарием, который должен работать автономно, но это, конечно, не является обязательным требованием.

Справочная информация: я пытаюсь настроить плагин выбора шрифта CKEditor (источник здесь ), чтобы он всегда отображал размер шрифта текущей позиции курсора (в отличие от только когда в span, который имеет явный набор font-size, который является текущим поведением).

Ответы [ 3 ]

52 голосов
/ 23 декабря 2009

Вы можете попробовать использовать нестандартное свойство 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');

Дополнительная информация:

Редактировать: Благодаря @ Crescent Fresh , @ kangax и @ Pekka за комментарии.

Изменения:

  • Добавлена ​​функция camelize, поскольку к свойствам, содержащим переносы, например font-size, необходимо обращаться как camelCase (например: fontSize) для объекта currentStyle IE.
  • Проверка существования document.defaultView перед доступом к getComputedStyle.
  • Добавлен последний случай, когда el.currentStyle и getComputedStyle недоступны, получить встроенное свойство CSS через element.style.
2 голосов
/ 11 апреля 2013

Похоже, что jQuery (по крайней мере, 1.9) использует getComputedStyle() или currentStyle, когда вы используете $('#element')[.css][1]('fontSize'), так что вам действительно не придется беспокоиться о более сложных решениях, если вы в порядке, используя jQuery.

Проверено в IE 7-10, FF и Chrome

2 голосов
/ 23 июня 2011

Чтобы преодолеть проблему 'em', я быстро написал функцию, если font-size в 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;
    }
...