Come ottenere l'altezza interna di un elemento

Question

Come si ottiene l'altezza interna di un elemento, senza padding e bordi?

No jQuery, solo pura JS, e una soluzione cross-browser (IE7 inclusi)

Answer 1

var style = window.getComputedStyle(document.getElementById("Example"), null); 
style.getPropertyValue("height"); 

La versione sopra funzionerà nei browser moderni. Si prega di controllare currentStyle per i browser IE.

Answer 2

EDIT dai commenti:

http://jsfiddle.net/hTGCE/1/ (un po 'più di codice del previsto)

in internet a trovare le funzioni in questo modo:

function getRectangle(obj) { 

      var r = { top: 0, left: 0, width: 0, height: 0 }; 

      if(!obj) 
      return r; 

      else if(typeof obj == "string") 
      obj = document.getElementById(obj); 


      if(typeof obj != "object") 
      return r; 

      if(typeof obj.offsetTop != "undefined") { 

      r.height = parseInt(obj.offsetHeight); 
      r.width = parseInt(obj.offsetWidth); 
      r.left = r.top = 0; 

      while(obj && obj.tagName != "BODY") { 

       r.top += parseInt(obj.offsetTop); 
       r.left += parseInt(obj.offsetLeft); 

       obj = obj.offsetParent; 
      } 
      } 
      return r; 
     } 

se si vuole sottrarre il padding/bordo -width è impostato nel file css e non dinamico nell'attributo style:

var elem = document.getElementById(id); 
    var borderWidth = 0; 

      try { 
      borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width'); 

      } catch(e) { 

      borderWidth = elem.currentStyle.borderWidth; 
      } 
    borderWidth = parseInt(borderWidth.replace("px", ""), 10); 

e con l'imbottitura uguale. quindi lo calcoli.

Answer 3

Ho avuto lo stesso problema e scoperto non esiste una soluzione nativa plattform croce, ma la soluzione è facile però

var actual_h = element.offsetHeight; 

      if(parseInt(element.style.paddingTop.replace('px','')) > 0){ 
       actual_h=actual_h - parseInt(element.style.paddingTop.replace('px','')); 

      } 
      if(parseInt(element.style.paddingBottom.replace('px','')) > 0){ 
       actual_h=actual_h - parseInt(element.style.paddingBottom.replace('px','')); 

      }