CODEWITHSUNDEEP
javascript
haravares
haravares

Reputation: 542

JavaScript getBoundingClientRect() vs offsetHeight while calculate element height

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;

Upvotes: 28

Views: 21228

Answers (1)

Hoijof
Hoijof

Reputation: 1413

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

Upvotes: 60

Related Questions