如何在渲染之前使用jQuery找到元素的预期渲染宽度？

Question

我有一个元素，例如在下面，尚未附加到body。我可以使用它，它具有将使用特定盒子模型渲染的所有类。

但我需要知道之前的宽度。

如果我使用Firebug检查元素，它会使用元素本身和CSS正确计算盒子模型和布局。但是我怎么能在jQuery中这样做呢？

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

css，例如对于i.icon设置width: 40;，但我该怎么做？

elm.width()上的所有变体都为0，包括elm.css('width')

Answer 1

如果不将其添加到文档中，则无法获取其计算属性。但是，您可以添加它，获取计算属性，然后将其删除，几乎可以肯定没有用户注意到。 E.g：

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