非附加元素宽度在 Chrome 中不起作用

Posted 2023-02-22

【中文标题】非附加元素宽度在 Chrome 中不起作用

【英文标题】：non attached element width not working in Chrome

【发布时间】：2017-03-02 13:20:39

【问题描述】：

我正在尝试在 Chrome 中找到解决方案。在 Firefox 中，我可以通过以下方式获取元素的大小（来自 CSS），而无需附加/显示它：

var elem = $('<div class="someclass"></div>');
var w = elem.width();
console.log(w);

FF 给了我正确的尺寸，但 Chrome 总是返回 0。有什么解决方法吗？

Fiddle here

【问题讨论】：

所有这些解决方案都让我附加到 DOM。我想如果使用 Chrome 而不附加，则没有解决方案。

【参考方案1】：

尝试通过 ID 或 Classname 获取选择器。 Jsfiddle

var elem = $('<div class="someclass"></div>');
var w = $(".someclass").width();
console.log(w);

它适用于所有浏览器；

【讨论】：

它在 chrome 中工作。检查 JSfiddle。在您的示例中，您没有使用 javascript 创建任何 html 或附加任何 HTML 代码，那么它将如何工作。

请阅读问题。我不想附加到 DOM。

对不起。那么不同的浏览器会以不同的方式呈现。

【参考方案2】：

这是某些浏览器的一些奇怪行为。

不过我找到了解决办法：

var elem = $('<div class="someclass"></div>').hide();
$('body').append(elem);
var width = elem.width();
elem.remove();
console.log(width);

【讨论】：

谢谢，我已经知道答案了。正如问题所述，我试图找到一种不附加的方法。

我知道，但找不到以不附加的方式模拟它的方法

【参考方案3】：

所有这些解决方案都让我附加到 DOM。我想如果使用 Chrome 而不是附加，则没有解决方案。