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/Det​​ermining_the_dimensions_of_elements