Die innere Höhe eines Elements erhalten

Question

Wie erhalten Sie die innere Höhe eines Elements, ohne Polster und Ränder?

Keine jQuery, nur reine JS und eine Cross-Browser-Lösung (IE7 enthalten)

Answer 1

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

Die obige Version in modernen Browsern funktionieren. Bitte überprüfen Sie currentStyle für IE-Browser.

Answer 2

EDIT Kommentare:

http://jsfiddle.net/hTGCE/1/ (ein bisschen mehr Code als erwartet)

im Internet können Sie Funktionen wie diese finden:

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

, wenn Sie die Polsterung subtrahieren wollen/Grenze -width wird in der css-Datei und nicht dynamisch in dem style-Attribut festgelegt:

und mit der Polsterung gleich. dann berechnen Sie es.

Answer 3

hatte ich das gleiche Problem und fand heraus, da keine native Querplattform-Lösung ist aber die Lösung ist einfach, obwohl

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','')); 

      }