隐藏元素：Javascript 属性和 CSS 样式的区别答案

【问题标题】：Hiding an element: Difference between Javascript attribute and CSS style隐藏元素：Javascript 属性和 CSS 样式的区别
【发布时间】：2013-12-29 08:48:57
【问题描述】：

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

例如：

element.setAttribute("hidden", true);

对

element.style.visibility = "hidden";

我对这两种可能性进行了一些试验。我的假设是，当使用 JavaScript 隐藏它时，该元素真正被隐藏并从流程中取出；并且当使用 CSS 样式隐藏时，元素只是没有显示，但仍然存在。

在我的实验中，大多数情况下这似乎是正确的，但有时并非如此。那么，这两种可能性的真正区别是什么？

【问题讨论】：

那是完全不同的野兽，实际上。其实你最好比较一下display:none风格和hidden attr。
好和更好的区别就是答案

标签： javascript html css visibility hidden

【解决方案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; }

【讨论】：

实际上，是的，它们是等价的。理论上，属性hidden 被分配给一个永远不应该向用户显示/读取（！）的元素 - 而never 在这里意味着in any situations possible。引用doc，“不得使用 hidden 属性隐藏可以在另一个演示文稿中合法显示的内容”。
我知道这发生在很久以前，但我没有从阅读该文档中获得同样的收获。您在上面提到的一点是指向一个特定的选项卡式界面场景，但是在同一个文档中，他们谈到通过 css 覆盖它和“出于这些原因，通常最好不要手动删除 open 属性。相反，使用 close( ) 方法来关闭对话框，或者使用 hidden 属性来隐藏它。"

【解决方案2】：

这两行代码的区别在于，其中之一为具有给定值的元素添加了一个属性，而另一个在样式声明中设置了一个属性。

例如：

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

element.setAttribute("hidden", true);

元素现在看起来像这样：

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

当你打电话时

element.style.visibility = "hidden";

你会得到：

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

【讨论】：

不要使用true，而是使用''来节省8字节的内存。抱歉，我是个微型表演狂，所以我不得不这么说。
哇，我猜你是。很好的召唤。我得投票赞成。谢谢