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

Question

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

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

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

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

33

javascript jquery css ckeditor font-size

задан Pekka supports GoFundMonica 28 April 2010 в 17:17

1 ответ

Другие вопросы по тегам:

javascript jquery css ckeditor font-size

Похожие вопросы:

score 53 · Accepted Answer

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

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

Get Styles (QuirksMode)

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

Изменения:

Добавлена функция camelize, так как свойства, содержащие гипены, такие как размер шрифта , должны быть доступны как camelCase (напр. : размер шрифта ) на объекте currentStyle IE.
Проверка существования document.defaultView перед обращением к getComputedStyle.
Добавлен последний случай, когда el.currentStyle и getComputedStyle недоступны, получить свойство inline CSS через element.style.