Obtenga el tamaño de fuente calculado para elemento DOM en JS

Question

¿Es posible detectar font-size calculado de un elemento DOM, teniendo en cuenta configuraciones genéricas realizadas en otro lugar (en la etiqueta body por ejemplo), valores heredados, etc.?

Un enfoque independiente del marco sería bueno, ya que estoy trabajando en un script que debería funcionar de forma independiente, pero eso no es un requisito, por supuesto.

Antecedentes: Estoy tratando de ajustar la fuente CKEditor's plug-in de selección (fuente here) de modo que siempre muestra el tamaño de la fuente de la posición actual del cursor (en comparación con sólo cuando dentro de un span que tiene un conjunto explícito font-size, que es el comportamiento actual).

Answer 1

Usted podría tratar de usar la propiedad de no-estándar de IE element.currentStyle, de lo contrario se puede buscar el método DOM Level 2 estándar getComputedStyle si está disponible:

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

Uso:

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

Más información:

• Get Styles (QuirksMode)

Editar: Gracias a @Crescent fresco, @kangax y @Pekka por los comentarios.

Cambios:

• Agregado camelize función, ya que las propiedades que contiene hypens, como font-size, se debe acceder como camelCase (por ejemplo .: fontSize) en el objeto currentStyle IE.
• Comprobando la existencia de document.defaultView antes de acceder al getComputedStyle.
• Se agregó el último caso, cuando el.currentStyle y getComputedStyle no están disponibles, obtenga la propiedad de CSS en línea a través de element.style.

Answer 2

Para solucionar el problema 'em', he escrito rápidamente una función, si el tamaño de letra en ie es 'em', la función calcula con el tamaño de fuente del cuerpo.

 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

Parece que jQuery (al menos 1,9) utiliza getComputedStyle() o currentStyle sí cuando se utiliza $('#element')[.css][1]('fontSize'), por lo que realmente no debería tener que molestarse con las soluciones más complicadas si estás bien con jQuery.

Probado en IE 7-10, FF y Chrome