Javascript 使用绝对定位隐藏DIV会导致回流
我很好奇，当隐藏绝对定位的元素时，它是否期望行为发生回流 考虑下面的示例代码：Javascript 使用绝对定位隐藏DIV会导致回流,javascript,css,html,Javascript,Css,Html,我很好奇，当隐藏绝对定位的元素时，它是否期望行为发生回流 考虑下面的示例代码： <html> <head> <style> .float { position: absolute; background-color: #E0E0E0; padding: 5; left: 100px;
<html>
<head>
<style>
.float {
position: absolute;
background-color: #E0E0E0;
padding: 5;
left: 100px;
top: 100px;
}
</style>
<script>
function toggle() {
var float = document.getElementById("float");
var style = float.style;
if (style.display == "none") {
style.display = "block";
} else
style.display = "none";
}
</script>
</head>
<body>
<a href="#" onclick="toggle();">Click to toggle!</a>
<div id="float" class="float" style="display:none">Floating div</div>
</body>
</html>
.浮动{
位置：绝对位置；
背景色：#E0；
填充：5；
左：100px；
顶部：100px；
}
函数切换（）{
var float=document.getElementById（“float”）；
var style=float.style；
如果（style.display==“无”）{
style.display=“block”；
}否则
style.display=“无”；
}
浮动div
style.display=“无”我的期望是不需要回流
我错了吗？还是我误解了时间线结果？有更好的方法吗
谢谢大家! 出现回流。更改图元的显示时，浏览器需要执行布局操作。也许您混淆了布局过程的概念，而布局过程会影响整个文档。在您的例子中，我认为布局只影响.float元素。您可以看到它在布局栏中单击。它会告诉你布局的范围
与看起来的相反，隐藏绝对位置的元素可能会导致整个页面的回流。例如，如果定位的图元比浏览器视口高或宽，则可能发生这种情况。在这种情况下，隐藏它可能会导致滚动条消失，从而导致整个文档回流
每个浏览器都有自己的方法来确定是否需要整个文档回流，因此在一个浏览器中工作的内容可能在另一个浏览器中不工作。你在这里有一篇好文章：
编辑：正如@xotic750所说，您可以避免回流设置visibility:hidden。这会导致浏览器避免绘制，但对于布局引擎，它将在那里。这样，当您显示/隐藏它时，它就不会是回流。缺点是什么？每次由于其他原因出现回流时，不可见div的内容都将成为布局过程的一部分。如果div的DOM树很简单，那么使用可见性可能会更好。但是如果div包含很多对象，特别是表，我认为应该使用display:none。当然，这还取决于div应该显示或隐藏的时间。对于无回流，我认为您需要查看，而不是在我单击布局项时提供的示例中，整个页面被高亮显示，而不是div本身。+1回答很好。但是我想你是指display:none
而不是display:hidden
是的。编辑。谢谢你，伊戈尔，现在我注意到了，你的div定位在（100px，100px）。页面中唯一的另一个元素是a元素，其大小远远小于a元素。隐藏div时，documentElement的尺寸将更改。再次，我建议您阅读我链接的文章。谢谢，我将阅读文章并在稍后提出更多问题：）