How to obtain clientWidth & clientHeight before DIV is visible

Question

I want to obtain the dimensions of a DIV element (used to display a popup menu at the cursor position) while it\'s style.display=\'none;\', however the dimensio

Answer 1

If you'd like to know the size of an element onscreen without it being visible you need it to be painted to the screen but not shown.

In order to get clientHeight and clientWidth you need it to be rendered so the calculations can be performed based on the screens current state (unless you have pre-programmed width and height, which I'm guessing you don't)

you can find out more information at MDN here

So you have options:

• create your div offscreen using positioning (fixed or absolute) combined with z-index or opacity
• use width: 0 and height: 0 and overflow: hidden then use scrollHeight and scrollWidth to find the overflow size

choose which option is best for your site, considering things like responsiveness and screen reflows and repaints