JS öğesinde DOM öğesi için hesaplanmış yazı tipi boyutu alın

Question

Başka bir yerde (örneğin, body etiketinde), miras alınan değerlerde vb. Yapılan genel ayarları dikkate alarak, bir DOM öğesinin hesaplanan font-size algılanması mümkün mü?

Tek başına çalışması gereken bir senaryo üzerinde çalıştığımdan, çerçeveye bağlı olmayan bir yaklaşım hoş olurdu, ancak bu bir zorunluluk değil.

Arka plan: Ben her zaman karşı geçerli imleç konumuna yazı tipi boyutunu (gösterecek şekilde CKEditor's tipi seçici eklentisi (kaynak here) çimdik çalışıyorum sadece açık bir font-size kümesi olan bir span içinde hangi mevcut davranışdır).

Answer 1

aksi takdirde varsa DOM Level 2 standart getComputedStyle yöntemi için bakabilir, standart dışı IE element.currentStyle özelliğini kullanmayı deneyebilirsiniz:

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

Kullanımı:

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

diğer bilgiler:

• Get Styles (QuirksMode)

Düzenleme: Teşekkür @Crescent Fresh, yorumlar için @kangaxve @Pekka için.

değişiklikler:

özellikleri font-size gibi hypens içeren yana Eklenen camelize fonksiyonu, currentStyle IE nesnede (fontSize .: gibi) CamelCase olarak erişilebilir olmalıdır

• .
• document.defaultView'un varlığının kontrol edilmesi getComputedStyle.
• Son durum, el.currentStyle ve getComputedStyle kullanıma sunulmadıysa, element.style aracılığıyla satır içi CSS özelliğini edinin.

Answer 2

'em' sorununu üstesinden gelmek için bir işlev yazdım, eğer font boyutu 'em' ise, işlev, gövde yazı tipi boyutuyla hesaplar.

 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

Eğer $('#element')[.css][1]('fontSize') kullandığınızda gerçekten jQuery kullanarak Tamam eğer daha karmaşık çözümlerle rahatsız etmek zorunda olmamalıdır yüzden jQuery gibi (1.9 en az), getComputedStyle() veya currentStyle kendisini kullanır görünüyor.

IE 7-10, FF ve Chrome'da test edilmiştir