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