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