JavaScript getBoundingClientRect() vs offsetHeight 同时计算元素高度

Question

获取元素高度的最佳方法是什么：

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

var height = myElement.getBoundingClientRect().height;

或

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

var height = myElement.offsetHeight;  

Answer 1

大多数情况下，当没有对元素应用任何变换时，它们与 getBoundingClientRect() 的宽度和高度相同。在变换的情况下，offsetWidth 和 offsetHeight 返回元素的布局宽度和高度，而 getBoundingClientRect() 返回渲染宽度和高度。例如，如果元素的宽度为：100px；和变换：比例（0.5）； getBoundingClientRect() 将返回 50 作为宽度，而 offsetWidth 将返回 100。

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