要素の内側の高さを取得する

Question

要素の内側の高さを、どのようにして埋め尽くさないようにしますか？

んjQueryの、ただ純粋なJS、およびクロスブラウザのソリューション（IE7を含む）

Answer 1

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

上記のバージョンが最新のブラウザで動作します。 IEブラウザの場合はcurrentStyleを確認してください。コメントから

Answer 2

EDIT：

http://jsfiddle.net/hTGCE/1/（その後、予想もう少しコード）あなたはこのような機能を見つけるインターネットで

：

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

あなたはパディングを減算し​​たい場合は/ボーダー-widthはcssファイルに設定され、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); 

と同じ詰め物が付いています。あなたはそれを計算します。

Answer 3

私は同じ問題を抱えていたし、ネイティブクロスplattformソリューションはありませんが分かったが、CSSで `ボーダー-box`を使用しないのはなぜかの

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

      }