Question

即使眨眼间，元素是否可见如果它被添加到DOM并立即删除？

var feed    = $('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);

console.log(feed.height());

feed.remove();

我在几个浏览器上尝试了上面的代码，看不到元素。但是这种行为在所有平台/浏览器中是否一致？

Answer 1

在阅读your previous question之后，您似乎非常想在实际显示之前计算元素的显示高度。我不完全清楚为什么你想要做到这一点（它散发出难闻的气味），但无论如何都是如此。

在<div>，height: 0以及所需元素宽度¹的页面中加overflow: hidden。添加我们在外部帮助器div中讨论的<div>（无论什么都不会显示），并在浏览器执行布局后获得其高度。之后，您可以随意进行（例如，将内部<div>移动到DOM树中的另一个位置）。

¹最好把它准确地放在你希望.entry结束的地方（即.entry，而助手div最终会成为兄弟姐妹。）

PS：如果你mention your real purpose，对每个人来说总是更好。

Answer 2

我可以想象一种情况，为了使浏览器能够计算元素的有效高度，它必须在窗口上渲染它，或者至少让元素的盒子对当前的站点布局进行回流。它可能不可见（因为，是的，它会被立即删除），但是像这样的情况会重排页面，并且可以看到页面上受影响元素的移动。

例如，图像浮现在脑海中，因为浏览器通常不知道图像的尺寸是什么，直到它们试图将它们展开（如果我错了，请纠正我）。

所以，不，我不会说这是一贯的行为。

Answer 3

像这样实现它。复制app.twitter_feed，并将其发送到地狱（坐标：x：-30000，y：-30000）并尝试你喜欢的任何内容。

var cloneTWFeed = $(app.twitter_feed).clone();
cloneTWFeed.css("position", "absolute").css("top","-30000").css("left","-30000");
var feed = $('<div class="entry"></div>').text(data.status).appendTo(cloneTWFeed);
console.log(feed.height());
feed.remove();

Answer 4

你当前的代码工作正常，但你永远不会看到该元素，因为在你追加它之后，你将其删除。

浏览器在添加后立即查看它。

请参阅此working Fiddle示例！

在那里，我用alert（）替换了console.log，强制浏览器等待我的响应，从而使我能够看到页面上的元素。

注意：也适用于console.log（），给我18px的高度。

您可以将remove（）包装在计时器上以实际查看元素（可视化），或者HTML标记是否强烈，或者所需的效果是仅从元素中收集数据，将元素放在隐藏的，这样你就可以在从中收集数据时将其删除。

Answer 5

如果您必须实现的是高度测量，请尝试添加不具有可见性的元素（请参阅CSS： http://reference.sitepoint.com/css/visibility）

在页面的区域中，不会对元素流造成任何问题。

该元素是否可见如果将其添加到DOM并立即删除？

5 个答案: