Get the height of an element minus padding, margin, border widths
JavascriptCssJavascript Problem Overview
Does anyone know if it's possible to get just the height of an element (minus vertical padding, border, and margin) when there is no inline height declaration? I need to support IE8 and above.
el.style.height
doesn't work because the styles are set in an external style sheet.
el.offsetHeight
or el.clientHeight
doesn't work because they include more than just the element's height. And I can't just subtract the element's padding, etc. because those values are also set in a CSS stylesheet, and not inline (and so el.style.paddingTop
doesn't work).
Also can't do window.getComputedStyle(el)
because IE8 doesn't support this.
jQuery has the height() method, which offers this, but I'm not using jQuery in this project, plus I just want to know how to do this in pure JavaScript.
Anyone have any thoughts? Much appreciated.
Javascript Solutions
Solution 1 - Javascript
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
.
Solution 2 - Javascript
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;
Solution 3 - Javascript
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;
}
Solution 4 - Javascript
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 }
}
Solution 5 - Javascript
Try element.currentStyle in IE8
. But please remember, than borderRightWidth
(borderLeftWidth)
returns not pixels, but 'thin', 'medium', 'thick'.