Javascript: Elementgröße ändern Handler (nicht css)

Question

Es gibt einen div, die Arten hat:

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

Wenn ich einen Text in den div (mit JavaScript) hinzufügen, ändert es seine Größe. Wie bekomme ich die neue Größe?

Ich versuchte

element.offsetHeight 

Aber es nicht wie erwartet funktionieren. Ich werde größer, als ich in der ersten Zeit brauche. Aber nach einiger Zeit, wenn ich wieder Wert von diesem Property bekomme, bekomme ich echte Größe.

Vielleicht liegt es daran, dass zwischen dem Setzen eines Textes und dem Einfügen in ein Div etwas Zeit liegt? Ich weiß es nicht.

<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

Sie können die Grenzen des Elements erhalten, oben, unten, rechts und links und ziehen Sie sie dann, um die Breite und die Höhe zu bekommen. Dies berücksichtigt die tatsächlichen Pixel auf der Seite nach der Änderung:

Answer 2

Ändern Sie dies in Ihrem Skript. Beachten Sie, dass ich in innerHTML mehr Text hinzugefügt habe.

<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> 

Und in Ihrem CSS ändern, um den min-height auf kleineren Wert die Differenz

min-height:10px; 

Ausgabe in der Konsole zu sehen ist:

Before: 40 
After: 180 

Hier ist ein Beispiel, das funktioniert (offen Konsole, um die Ausgabe zu sehen): https://jsfiddle.net/_jserodio/q78dLz8h/