Get the height of an element minus padding, margin, border widths

element.getComputedStyle would return the height according to the value of box-sizing. If the element is using box-sizing: content-box;, you can use getComputedStyle to compute the height without padding or borders:

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

The above version will work in modern browsers. Please check currentStyle for IE browsers.

Cross browser:

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

source

Try element.currentStyle in IE8. But please remember, than borderRightWidth (borderLeftWidth) returns not pixels, but 'thin', 'medium', 'thick'.

Here's the solution that works for both cases of box-sizing: content-box and border-box.

var computedStyle = getComputedStyle(element);


elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding


elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Works in IE9+

You can use feature detection

if (!getComputedStyle) { alert('Not supported'); }

This will not work if element's display is inline. Use inline-block or use getBoundingClientRect.

Improved Dan's code to work on inline elements as well (using offset* instead of client*):

var cs = getComputedStyle(element);


var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);


var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);


// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

Turned Dan's answer into a function

export const innerDimensions = (node) => {
var computedStyle = getComputedStyle(node)


let width = node.clientWidth // width with padding
let height = node.clientHeight // height with padding


height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)
width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)
return { height, width }
}