如何获取元素的渲染高度？

在前端开发中，经常需要获取元素的渲染高度。通常情况下，我们使用offsetHeight属性来获取元素的高度。但是，这个属性获取的值包括元素的 padding、border 和滚动条占用的空间。如果想要获取元素的纯高度，需要进行一些处理。

获取纯高度

要想获取纯高度，需要减去元素的 padding 和 border。可以使用如下公式进行计算：

pureHeight = offsetHeight - paddingTop - paddingBottom - borderTop - borderBottom

其中，paddingTop和paddingBottom分别为上下边框的高度，borderTop和borderBottom分别为元素的上下 padding 值。

示例代码：

function getElementPureHeight(element) {
  const { offsetHeight, paddingTop, paddingBottom, borderTop, borderBottom } = element;
  return offsetHeight - paddingTop - paddingBottom - borderTop - borderBottom;
}

const elem = document.getElementById('example-elem');
const pureHeight = getElementPureHeight(elem);
console.log(pureHeight);

获取计算高度

有时候，元素的高度是通过 CSS 样式计算出来的，例如使用了calc函数或者百分比单位。这时候，就无法通过offsetHeight来获取元素的高度了。但是，我们可以使用getComputedStyle函数来获取元素的计算高度。

示例代码：

function getElementComputedHeight(element) {
  const computedStyles = window.getComputedStyle(element);
  return parseFloat(computedStyles.getPropertyValue('height'));
}

const elem = document.getElementById('example-elem');
const computedHeight = getElementComputedHeight(elem);
console.log(computedHeight);

总结

通过上面的介绍，我们了解了如何获取元素的渲染高度，分别是获取纯高度和计算高度。在实际开发中，根据需求选择适合的方法即可。