Я не могу получить точную высоту элемента с чистым 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. Вы можете прочитать документы здесь

Answer 2

Почему вы не используете element.offsetHeight? Возвращает высоту элемента, включая отступ и рамку