0

如果将元素添加到 DOM 并立即删除，即使眨眼也能看到元素吗？

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

console.log(feed.height());

feed.remove();

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

4

5 回答 5

2

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

将 a与、和所需的元素宽度一起放入<div>您的页面中¹。在那个外部辅助 div 里面添加我们正在讨论的内容（无论如何它都不会显示），并在浏览器执行布局后获取它的高度。之后，您可以随心所欲地继续（例如，通过将内部移动到 DOM 树中的另一个位置）。height: 0overflow: hidden<div><div>

¹ 最好将它准确地放在你想要的.entry最终位置（即.entry辅助 div 最终将成为兄弟姐妹）。

PS：如果您提及您的真正目的，对每个人总是更好。

于 2012-06-22T07:28:10.637 回答
0

我可以想象这样一种情况，其中浏览器要能够计算元素的有效高度，它必须在窗口上呈现它，或者至少让元素的框根据当前站点布局重排。它可能不可见（是的，它会立即被删除），但是这样的情况会重新排列页面，并且可以看到页面上受影响元素的移动。

例如，图像会浮现在脑海中，因为浏览器通常不知道图像的尺寸，直到他们尝试将它们布置好（如果我错了，请纠正我）。

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

于 2012-06-22T07:24:20.443 回答
0

像这样实现它。制作 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();
于 2012-06-22T07:27:38.010 回答
0

您当前的代码工作得很好，但是您永远看不到该元素，因为在您附加它之后，您将其删除。

浏览器看到它，在他删除它的时候，就在被附加之后。

请参阅此工作小提琴示例！

在那里，我将 console.log 替换为 alert() 以强制浏览器等待我的响应，从而使我能够看到页面上的元素。

注意： console.log() 也可以正常工作，给我 18px 的高度。

您可以将 remove() 包裹在计时器上以实际查看元素（视觉上），或者如果 HTML 标记过于密集，或者所需的效果是仅从元素中收集数据，请将元素放在隐藏的元素中，这样，您可以在从其中收集数据后将其删除。

于 2012-06-22T07:35:01.940 回答
-1

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

在不会导致元素流出现问题的页面区域中。

于 2012-06-22T07:24:23.627 回答