隐藏元素：Javascript属性和CSS样式之间的差异

Question

我想知道在使用JavaScript属性或CSS样式隐藏元素时结果是否有任何差异。

例如：

element.setAttribute("hidden", true);

VS

element.style.visibility = "hidden";

我尝试了这两种可能性。我的假设是，当用JavaScript隐藏它时，该元素是真正隐藏的并从流中取出;当使用CSS样式隐藏时，元素只是没有显示但仍然存在。

在我的实验中，这似乎是正确的，但有时却没有。那么，这两种可能性之间的真正区别是什么？

Answer 1

使用CSS隐藏元素有两种基本方法：

首先，有visibility: hidden;（或element.style.visibility = "hidden";）。这简单地使项目不可见。它仍占用文档中的空间，它仍然是流程的一部分。

然后是display: none;（或element.style.display = "none";）。这将完全从文档流中删除元素。它仍然存在于DOM中，它不会呈现给页面。

HTML5的hidden attribute（或element.setAttribute("hidden", true);）大致相当于display: none;。

事实上，为了使旧版浏览器与该属性兼容，通常会将其添加到样式表中：

[hidden] { display: none; }

Answer 2

这两行代码之间的区别在于，其中一行代码使用给定值向元素添加属性，而另一行在样式声明中设置属性。

例如：

假设您的元素变量是div。当你打电话

element.setAttribute("hidden", true);

元素现在看起来像这样：

<div hidden="true"></div>

致电时

element.style.visibility = "hidden";

你会得到：

<div style="visibility: hidden;"></div>