style.visibility 和 style.display 之间的区别 [重复]答案

【问题标题】：Difference betweet style.visibility and style.display [duplicate]style.visibility 和 style.display 之间的区别 [重复]
【发布时间】：2011-11-11 17:15:25
【问题描述】：

可能重复：
What is the difference between visibility:hidden and display:none

我正在查看使用 JavaScript 隐藏/显示 div 标记的示例。在某些示例中，他们使用visibility，在某些示例中使用display。

例如

document.getElementById("divhotel").style.visibility = "hidden";

对

document.getElementById("divhotel").style.display = "none";

两者有什么区别？

【问题讨论】：

标签： javascript css

【解决方案1】：

当您将visibility 设置为hidden 时，该元素不会显示，但仍会占用页面上的相同空间。

当您将display 转换为none 时，该元素既不显示也不占用页面上的任何空间。

我发现自己经常使用display，但这取决于您的场景需求。

【讨论】：

【解决方案2】：

visibility 是元素的渲染方式，它存在的块仍然布局，无论值如何。因此，物品可能会被推来推去。 display 是如何渲染到页面的：block 是div 类型的元素，带有一个完整的盒子模型； none 元素根本没有呈现到页面上； inline 是一个内联元素，例如 span 或锚标记。

【讨论】：

【解决方案3】：

啊，亲爱的Google。

"style.visiblity 使元素可见或隐藏，即使您看不到它，它仍会呈现并占用页面空间。如果您将 style.display 设置为“none”，则不会处理标记并且不占用页面空间。”

【讨论】：

你们太快了。每个 +1。