There is a div having min-width and min-height. When you add text (script), its size increases automatically. How to track its new size?

I tried to use

element.offsetHeight

But it turns out the wrong result (more than necessary) immediately after adding the text. And if you get the value of this property after a while, you get the right result.

Perhaps after installing the text, you need some time for ... proper placement in the diva?

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

And no, padding has nothing to do with it. The gap between the initial irregular height and the correct one is the greater, the larger the text, compared with the previous value.

  • Text add skiptom? What events are hung on the block when adding text? - UserX
  • No events. Yes, I add text with a script, and then immediately request new dimensions. - user64675
  • Write the markup and the script in question, but then I tried at my height returns. just without a markup it’s impossible to write an answer - UserX
  • Added markup, styles, code. - user64675
  • And what is not right, everything works as it should be returns 140? - UserX

1 answer 1

Use popup.elementHeight