要素の高さからパディング、マージン、ボーダーの幅を除いたものを取得する

質問

インラインのheight宣言がない場合に、要素の高さだけを（垂直パディング、ボーダー、マージンを除いて）取得することが可能かどうか、どなたかご存知でしょうか？IE8以降をサポートする必要があります。

el.style.height は、スタイルが外部スタイルシートに設定されているため、動作しません。

el.offsetHeight または el.clientHeight は、要素の高さ以上の値を含んでいるため、動作しません。また、要素のパディングなどを差し引くこともできません。これらの値もインラインではなくCSSスタイルシートで設定されるからです（そのため el.style.paddingTop は機能しません）。

もできません。 window.getComputedStyle(el) もできません。

jQueryにはheight()メソッドがあり、これを提供していますが、私はこのプロジェクトでjQueryを使用しておらず、さらに私は純粋なJavaScriptでこれを行う方法を知りたいだけです。

どなたか考えをお持ちですか？とても感謝しています。

どのように解決するのですか？

element.getComputedStyle の値に応じて高さを返します。 box-sizing . もし要素が box-sizing: content-box; を使っている場合は getComputedStyle を使うと、パディングやボーダーなしで高さを計算することができます。

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

上記バージョンはモダンブラウザで動作します。IEブラウザの場合はcurrentStyleを確認してください。

クロスブラウザです。

try {
 el = window.getComputedStyle(document.getElementById('example'), null)
     .getPropertyValue('height');
} catch(e) {
 el = document.getElementById('example').currentStyle.height;
} 

ソース