[解決済み] html要素(div)の高さはborder, padding, marginを含めてフルサイズ？

質問

divの高さ全体を表示したいのですが、現在使用しているのは

document.getElementById('measureTool').offsetHeight

offsetHeight - 要素の高さを返します。ボーダーとパディングがある場合はそれも含みますが、マージンは含みません。

しかし、div 内のネストされた要素のひとつに margin-top の 20% というように、間違った計測をしてしまいます。試しに style.marginTop と scrollHeight を実行しても成功しません。

javascriptで要素（div）の完全な高さ（border、padding、margin）を取得するにはどうすればよいですか？

他に方法がなければ、私はjQueryで大丈夫です。

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

jQueryを使用できる場合。

$('#divId').outerHeight(true) // gives with margins.

jQueryのドキュメント

vanilla javascriptについては、もっとたくさん書く必要があります（いつものように・・・）。

function Dimension(elmID) {
    var elmHeight, elmMargin, elm = document.getElementById(elmID);
    if(document.all) {// IE
        elmHeight = elm.currentStyle.height;
        elmMargin = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10) + "px";
    } else {// Mozilla
        elmHeight = document.defaultView.getComputedStyle(elm, '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(elm, '').getPropertyValue('margin-bottom')) + "px";
    }
    return (elmHeight+elmMargin);
}

ライブデモ

コードソース