Ottieni la dimensione del carattere calcolato per l'elemento DOM in JS

Question

È possibile rilevare il font-size calcolato di un elemento DOM, prendendo in considerazione le impostazioni generiche effettuate altrove (Nel tag body, ad esempio, i valori ereditati e così via?

Un approccio indipendente dal framework sarebbe bello, visto che sto lavorando a uno script che dovrebbe funzionare autonomamente, ma ovviamente non è un requisito.

Background: Sto cercando di modificare CKEditor's carattere plug selettore (fonte here) in modo che mostra sempre la dimensione del carattere di posizione del cursore (contrariamente a quanto accade quando all'interno di un span che ha un esplicito font-size set, che è il comportamento attuale).

Answer 1

Si potrebbe provare a utilizzare la proprietà non standard di IE element.currentStyle, altrimenti si può cercare il getComputedStyle metodo di DOM Level 2 standard se disponibili:

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

Usage:

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

Maggiori informazioni:

• Get Styles (QuirksMode)

Edit: Grazie alla @Crescent Fresh, @kangax e @Pekka per i commenti.

Modifiche:

• aggiunte camelize funzione, in quanto le proprietà contenente hypens, come font-size, deve essere letta come camelCase (es .: fontSize) sull'oggetto currentStyle IE.
• Prima di accedere a getComputedStyle, verificare l'esistenza di document.defaultView.
• Aggiunto l'ultimo caso, quando el.currentStyle e getComputedStyle non sono disponibili, ottenere la proprietà CSS in linea tramite element.style.

Answer 2

Per superare il problema "em" ho scritto rapidamente una funzione, se la dimensione del font è "em" la funzione calcola con la dimensione del carattere del corpo.

 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

Sembra jQuery (1.9 almeno) utilizza getComputedStyle() o si currentStyle quando si utilizza $('#element')[.css][1]('fontSize'), in modo che davvero non dovrebbe avere a perdere tempo con le soluzioni più complicate se sei OK utilizzando jQuery.

Testato in IE 7-10, FF e Chrome