Get the offset of a hidden element

Question

How can I get the coordinates of a hidden element? offset() doesn't support the use for hidden elements. Any hints?

Answer 1

I recently stumbled upon Element.getClientRects(), which returns a DOMRectList with DOMRect elements inside. I tested it on a hidden element on my website and it returned plausible coordinates on

document.querySelector('#someHiddenElement').getClientRects()[0]

This will though return several DOMRects if you apply it to a multiline <span> for example, so there you should take several/all of the contained DOMRects, not only the first into account.

Answer 2

Other than quick show & do-stuff & hide -procedure, it might be possible to simply use loading mask to pretend that screen (or part of it) is invisible.

This occurred when I was working on map which had hidden elements. I needed to get css-positions / offsets read without displaying those elements. I came up with three possible methods to use:

• load mask over map for the time being, so that map doesn't display hidden elements, and read offsets (problem: overlay hides parent element (map) too). This works best if there is no parent-element which requires displaying.

• change z-index of elements which are hidden, so that they go behind parent element, show & and read values, hide 'em and change z-index to original.

• use separate data-variables for CSS-styles, so that they are part of element. This works nice if elements have fixed/absolute positions against window or certain element, since css-positions / offsets won't change according to size of window/element. This worked well in my case, since I was working with elements absolute against window (fullscreen/-window application).

Other methods suggested by users work too, but it all depends on what you are working on.

Answer 3

If your element has had .hide() called on it, or if it's got display:none in css, the browser doesn't bother rendering it at all. In this case, the answer is not directly. In recent jQueries, you can't even get its width or height.

On the other hand, if you .show() an element, then .hide() it before an execution loop (an event firing through to when there's no more code to run for that event), the browser will be forced to relayout the page and you'll be able to get its offset between when it's shown and hidden, but it won't be forced to repaint, so your users won't see a blip, and you won't lose as much performance as you might think.

Answer 4

You can get coordinates of visibility:hidden element but display:none element is excluded from rendering tree. So its position is undefined.