26

What is the best way to get element height:

var myElement = document.querySelector('.some-class');

var height = myElement.getBoundingClientRect().height;

or

var myElement = document.querySelector('.some-class');

var height = myElement.offsetHeight;
haravares
  • 502
  • 1
  • 6
  • 12

1 Answers1

53

Most of the time these are the same as width and height of getBoundingClientRect(), when there aren't any transforms applied to the element. In case of transforms, the offsetWidth and offsetHeight returns the element's layout width and height, while getBoundingClientRect() returns the rendering width and height. As an example, if the element has width: 100px; and transform: scale(0.5); the getBoundingClientRect() will return 50 as the width, while offsetWidth will return 100.

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Hoijof
  • 1,343
  • 15
  • 27
  • What about `el.clientHeight` ? – mesqueeb Apr 06 '19 at 09:53
  • @mesqueeb Take a look at how `clientHeight` works. It depends on what you need. https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements – Hoijof Apr 08 '19 at 07:59
  • 2
    Thanks! In case someone comes looking here. This answer was also reaaaally helpful https://stackoverflow.com/questions/4106538/difference-between-offsetheight-and-clientheight – mesqueeb Apr 12 '19 at 00:05