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

Question

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.

Yes, but as I mentioned, jQuery achieves this somehow with .height(), so this must be possible somehow. — Joe, Aug 08 '14 at 06:32
It probably uses `getComputedStyle`, and `currentStyle` for older IE. — adeneo, Aug 08 '14 at 06:34
Yup, jQuery's `height()` and `innerHeight()` both use `css()` internally, and `css()` uses `getComputedStyle` and `currentStyle` internally. — adeneo, Aug 08 '14 at 06:36
possible duplicate of [get element inner height](http://stackoverflow.com/questions/13435604/get-element-inner-height) — Mr_Green, Aug 08 '14 at 06:38
@adeneo I was unaware of currentStyle. I will try some combination of the 2 and post back if I find something that works. Thanks! — Joe, Aug 08 '14 at 06:39
@Mr_Green Yep, I read that question, but I don't feel like it ever produced a full solution. — Joe, Aug 08 '14 at 06:41

score 110 · Answer 1 · edited May 20 '16 at 06:51

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.

score 29 · Answer 2 · edited Jan 11 '18 at 10:55

29

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;

edited Jan 11 '18 at 10:55

flori

14,339
4
56
63

answered Aug 13 '16 at 05:14

Samuel Katz

24,066
8
71
57

2

NOTE that offsetHeight include the size of the scrollBar too! so if the desired behavior is to not include the scrollBar that will not do. calculating the scroll width https://stackoverflow.com/a/13382873/7668448, – Mohamed Allal Mar 20 '18 at 20:16

score 22 · Accepted Answer · edited Jul 02 '21 at 00:00

22

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

edited Jul 02 '21 at 00:00

Bashu Naimi-Roy

92
9

answered Aug 08 '14 at 06:26

Bhojendra Rauniyar

83,432
35
168
231

1

`getElementById` can have only one argument.. what is this man? :) – Mr_Green Aug 08 '14 at 06:47
3

also it's not necessary to use `try...catch` in this case, we can check for the existence of a member using `in` operator, such as by `if('getComputedStyle' in window) ... ` or use `typeof` such as `if(typeof window.getComputedStyle !== 'undefined')...` – King King Aug 08 '14 at 06:51
2

One thing I'll add is that if the element's height is auto, `.currentStyle.height` will only return 'auto', and if its height is a percentage, it will only return that percentage, not the computed height in pixels. So in this case, if you still need to know the height of the element, you can take the `.offsetHeight` of it, then use `.currentStyle` to get any vertical padding or border values and subtract them from the offsetHeight value to give you the element's height. Though this wouldn't work if padding or borders were also set as percentages. – Joe Aug 08 '14 at 14:52
46

This won't work if you are using `box-sizing: border-box`, which is is the most common-sense to use. – GetFree Dec 29 '14 at 08:03
This will not work if the style property of an element is not set – Dan Apr 26 '15 at 18:27
7

This contains padding, at least when I tried to use it on an SVG – Andy Jun 16 '15 at 18:17
im baffled why this was selected as the answer since it contains padding – oldboy Sep 03 '19 at 04:12
This doesn't work for me, it returns the size including padding. – Aaron Franke Dec 09 '19 at 11:43
In contrast to [what Mr_Green wrote](https://stackoverflow.com/questions/25197184/get-the-height-of-an-element-minus-padding-margin-border-widths#comment39239551_25197206), `getElementById` can actually have two arguments, the second being optional. [ref](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) `var style = window.getComputedStyle(element [, pseudoElt]);` – forrestkirby Oct 19 '20 at 09:30

score 11 · Answer 4 · edited Dec 19 '19 at 10:41

11

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

edited Dec 19 '19 at 10:41

Bartando

719
8
26

answered Jun 10 '19 at 18:48

James Harrington

3,138
30
32

Very useful. To those utilizing this, I'd recommend using `node.getBoundingClientRect()` to get the precise decimal width and height of the element for more accuracy. – marianydev Aug 02 '22 at 00:46

score -1 · Answer 5 · edited Mar 05 '15 at 14:28

-1

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

edited Mar 05 '15 at 14:28

Mike Fielden

10,055
14
59
99

answered Mar 05 '15 at 14:02

Maksim Slepov

81
1
4

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

5 Answers5

Linked