Есть div, имеющий min-width и min-height. При добавлении текста(скриптом) его размеры увеличиваются автоматически. Как отследить его новый размер?
Я пробовал использовать
element.offsetHeight
Но получается неверный результат (больше чем надо) сразу после добавления текста. А если получить значение этого свойства через некоторое время, получается верный результат.
Возможно, после установки текста, нужно некоторое время для... правильного размещения его в диве?
<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>
И нет, padding тут не при чем. Разрыв между начальной неправильной высотой и правильной тем больше, чем больше текста, по сравнению с прошлым значением.