DOM Element Width before Appended to DOM

Question

I'm sure the answer is no, but is it possible to determine the width of an element before it is appended to the DOM?

Once it's appended, I know I can use offsetWidth and offsetHeight.

Thanks

Answer 1

It is not possible, at least not accurately, because styling affects these properties, and where it's put determines how it is styled and what rules affect it.

For example placing a <p></p> in the page would by default be the width of the body if appended as a child to it, but if you appeneded it inside for example a <div style="width: 100px;"></div>, then you see how that quickly changes things.

Answer 2

What you can do with MooTools is use the Element.Measure class - meaning, you inject the element to the DOM, but keep it hidden. Now, you can measure the element without actually showing it.

http://mootools.net/docs/more/Element/Element.Measure

Answer 3

The trick is to show the element (display:block) but also hide it (visibility:hidden) and to set it’s position to absolute so that it doesn’t affect the page flow.

The MooTools Element.Measure class does this, as Oscar mentioned.