javascript - 我无法用纯 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 px，因此渲染的 dom 返回 55，但我的函数返回 52。

有什么想法吗？

更新:

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

Answer 1

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