How can I find the intended render width of an element using jQuery before it is rendered?

Question

I have an element, eg below, that is not yet appended to the body . I can work with it fine, it has all the classes that will cause it to render with a particular box model.

But I need to know its width before it is actually appended.

If I use Firebug to inspect the element, it correctly calculates the box model and layout using the element itself and CSS. But how can I do so from within jQuery?

<li>
  <i class="icon"></i>
  <a>/a>
</li>

The css, eg for i.icon sets width: 40; , but how do I get that?

All of the variants on elm.width() give 0, including elm.css('width')

Answer 1

You can't get its computed properties without adding it to the document. However, you can add it, get the computed properties, and then remove it, almost certainly without the user noticing. Eg:

var $elm = /*...the jQuery wrapper around your element...*/;

// Append it
$elm.appendTo(document.body); // Put it where it should go, not usually `document.body` literally

// Get the properties here, e.g.:
var width = $elm.width();

// Remove it again
$elm.remove();

Live Example | Source