Uzyskaj obliczony rozmiar czcionki dla elementu DOM w JS

Question

Czy jest możliwe wykrycie obliczonego elementu font-size elementu DOM, biorąc pod uwagę ogólne ustawienia wykonane w innym miejscu (na przykład w tagu body), wartości dziedziczone itd.?

Podejście niezależne ramy byłoby miło, jak pracuję nad scenariuszem, który powinien działać samodzielnie, ale nie jest to wymóg oczywiście.

Tło: Staram się podkręcić CKEditor's czcionki wtyczki wybieraka (źródło here) tak, że zawsze pokazuje rozmiar czcionki bieżącej pozycji kursora (w przeciwieństwie do tylko wtedy, gdy w span który ma wyraźny font-size zestaw, który jest bieżącym zachowaniem).

Answer 1

Można spróbować użyć niestandardowego IE element.currentStyle nieruchomości, w przeciwnym razie można szukać DOM Level 2 standardowej getComputedStyle metody jeżeli są dostępne:

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)]; 
    } 
} 

Zastosowanie:

var element = document.getElementById('elementId'); 
getStyle(element, 'font-size'); 

Więcej informacji:

• Get Styles (tryb QuirksMode)

Edit: Dzięki @Crescent Fresh, @kangax i @Pekka za komentarze.

Zmiany:

• Dodano camelize funkcji, gdyż właściwości zawierający hypens, jak font-size muszą być dostępne jako camelCase (np .: fontSize) na obiekcie currentStyle Ie.
• Sprawdzanie istnienia document.defaultView przed uzyskaniem dostępu getComputedStyle.
• Dodano ostatni przypadek, gdy el.currentStyle i getComputedStyle nie są dostępne, pobierz wbudowaną właściwość CSS przez element.style.

Answer 2

Aby rozwiązać problem em, szybko napisałem funkcję, jeśli rozmiar czcionki w ie jest "em", funkcja oblicza rozmiar czcionki.

 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; 
    } 

Answer 3

Wygląda jQuery (1,9 przynajmniej) wykorzystuje getComputedStyle() albo samych currentStyle podczas korzystania $('#element')[.css][1]('fontSize'), tak naprawdę nie powinny zajmować się bardziej skomplikowanych rozwiązań, jeśli jesteś OK przy użyciu jQuery.

Testowane w IE 7-10, FF i Chrome