我无法使用纯JavaScript获取元素的准确高度

Question

我使用以下函数来获取元素的完整高度：

outerHeight1=(el)=> {
    let style = window.getComputedStyle(el);

    return (parseInt(style.getPropertyValue("height").replace("px",""))+
        parseInt(style.getPropertyValue("border-bottom-width").replace("px",""), 10)+
        parseInt(style.getPropertyValue("border-top-width").replace("px",""), 10)
    );
}

值得注意的是，元素是动态添加到dom中的。 我看到的是我在chrome中检查的渲染高度大约比我的函数返回的高度高3像素，因此渲染的dom返回55，但是我的函数返回52。

有什么主意吗？

更新：

根据建议，我使用了getBoundingClientRect，高度为0。 这是我的控制台中的日志

Answer 1

您可以使用element.getBoundingClientRect()，它将返回其键之一为height的对象。 You can read the docs here

Answer 2

您为什么不使用element.offsetHeight？它将返回元素的高度，包括填充和边框