Full height of a html element (div) including border, padding and margin?

Question

I need the full height of a div, I\'m currently using

document.getElementById(\'measureTool\').offsetHeight

offsetHeig

Answer 1

If you can use jQuery:

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

jQuery docs

For vanilla javascript you need to write a lot more (like always...):

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

​ Live DEMO

code source