Clever Geek Handbook

JavaScript getBoundingClientRect () vs offsetHeight when calculating element height

What is the best way to get the height of an element:

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

var height = myElement.getBoundingClientRect().height;

or

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

var height = myElement.offsetHeight;
+3


source to share


1 answer


In most cases, they are the same width and height as getBoundingClientRect () when there are no transformations applied to the element. In case of transformations, offsetWidth and offsetHeight returns the width and height of the element's layout, and getBoundingClientRect () returns the width and height of the render. For example, if the element has a width: 100 pixels; and transform: scale (0.5); getBoundingClientRect () will return 50 as the width and offsetWidth will return 100.



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

+2


source






More articles:


All Articles