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 dimensions of the DIV always return 0. The only way I seem to be able to get the dimensions is to make the DIV style.display='block;' at 0,0 and then move it to the required position, but that looks jumpy.

I've tried making the DIV visible outside of the visible screen area but that doesn't work. Is there a way to get the clientWidth and clientHeight values whilst the DIV is hidden?

Answer 1

If your DIV is not visible, you won't be able to get its dimensions.

However, there is a workaround. Your div has to be "visible", but that doesn't mean it's opacity and position have to be 1 and relative.

Set the opacity to 0 and the position to "absolute" and you'll be able to get the DIV dimensions.

---

EDIT

Since I think more people will have a similar problem, I feel I should explain my answer a little more.

If you try to get the size of a hidden element with JavaScript, you will always get 0.

So there are techniques to get the real size without displaying the element to the user. My favourite is the one I already wrote about above. Here are the more detailed steps:

1. you set the elements opacity to 0. This way it won't be displayed to the end user while you are getting the dimensions.

2. you set the element position to "absolute". This way it won't take up any space.

3. now it's safe to set the display to "inline-block".

4. you read the elements dimensions. This time you'll get the real values.

5. You set the display back to "hidden" and set the opacity and position back to its original values.

And now you have the size of a hidden element.

Answer 2

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