DOM Element Width before Appended to DOM

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.

The Mootools Element.Measure functionality that Oscar mentioned is awesome. For those that use jQuery, here's a quick plugin that accomplishes the same thing:

$.fn.measure = (fn)->  el = $(this).clone(false)  el.css    visibility: 'hidden'    position:   'absolute'  el.appendTo('body')  result = fn.apply(el)  el.remove()  return result

You can call it like this, making sure to return the value (thanks Sam Fen for pointing that out!):

width = $('.my-class-name').measure( function(){ return this.width() } )

Modified the code a bit. Here is a pure JS solution:

function measure(el, fn) {    var pV = el.style.visibility,         pP = el.style.position;            el.style.visibility = 'hidden';    el.style.position = 'absolute';        document.body.appendChild(el);    var result = fn(el);    el.parentNode.removeChild(el);        el.style.visibility = pV;    el.style.position = pP;    return result;}var div = document.createElement('div');div.innerHTML = "<p>Hello</p><br/>";alert(div.offsetHeight); // 0alert(measure(div, function(el){return el.offsetHeight})); // 68