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

Question

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

但我需要在实际附加之前知道它的宽度。

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

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

CSS，例如for i.icon 设置 width: 40;，但我如何获得它？

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

Answer 1

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

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