Javascript: элемент обработчик изменения размера (не CSS)

Question

Существует DIV, который имеет стили:

min-width:100px 
min-height:100px 

Когда я добавить текст к DIV (с помощью JavaScript), он меняет свой размер. Как получить новый размер?

Я попытался

element.offsetHeight 

Но это не работает, как ожидалось. Я получаю размер больше, чем мне нужно в первый раз. Но через некоторое время, если я снова получу значение этой пропозиции, я получаю реальный размер.

Возможно, это связано с тем, что между установкой текста и установкой его в div требуется некоторое время? Я не знаю.

<div class="parent"><div class="popup"></div></div> 
<style> 
    * { 
    box-sizing:border-box; 
    } 
    .parent { 
    position: absolute; 
    z-index: 0; 
    } 
    .popup { 
    position: absolute; 
    min-width: 100px; 
    min-height: 100px; 
    padding: 20px; 
    border-radius: 12px; 
    background:#000; 
    color:#fff; 
    visibility:hidden; 
    } 
    .popup:before, .popup::before, .popup:after, .popup::after { 
    content:""; 
    width:0px; 
    height:0px; 
    display: block; 
    position: absolute; 
    } 
</style> 
<script> 
    var popup = document.getElementsByClassName('popup')[0]; 
    popup.innerHTML = 'любой текст от 3 до NNN строк'; 
    console.log(popup.offsetHeight); 
</script> 

Answer 1

Вы можете получить границы элемента, сверху, снизу, справа и слева, а затем вычесть их, чтобы получить ширину и высоту. Это учитывает фактические пиксели на странице после ее изменения:

var width = [element].getBoundingClientRect().right - [element].getBoundingClientRect().left ; 
var height = [element].getBoundingClientRect().bottom - [element].getBoundingClientRect().top ; 

Answer 2

Изменить это в своем скрипте. Обратите внимание, что я добавил больше текста в innerHTML.

<script> 
    var popup = document.getElementsByClassName('popup')[0]; 
    console.log("Before: "+popup.offsetHeight); 
    popup.innerHTML = 'любой текст от 3 до NNN строк<br><br>moretext'; 
    console.log("After: "+popup.offsetHeight); 
</script> 

И изменить в CSS в мин-высоту до меньшего значения, чтобы увидеть разницу

min-height:10px; 

выхода в консоли:

Before: 40 
After: 180 

Вот пример, который работает (открыт консоль, чтобы увидеть выход): https://jsfiddle.net/_jserodio/q78dLz8h/