隐藏元素：Javascript属性和CSS样式之间的区别

我想知道隐藏具有JavaScript属性或CSS样式的元素时结果是否有任何区别。隐藏元素：Javascript属性和CSS样式之间的区别

例如：

element.setAttribute("hidden", true);

element.style.visibility = "hidden";

我尝试了一下与这两个可能性。我的假设是，当用JavaScript隐藏它时，元素是真正隐藏起来的，并且不在流中;当用CSS样式隐藏时，元素只是未显示，但仍然存在。

大部分情况下，这似乎在我的实验中，但有时不是。那么，这两种可能性之间的真正区别是什么？

来源

2013-12-11 Jbartmann

这是完全不同的东西，其实。事实上，你最好把'display：none'风格与'hidden'风格进行比较。 – raina77ow

好的和好的区别将会是答案 –

有两种基本方法用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; }

来源

2013-12-11 11:46:51

实际上，是的，它们将是等效的。理论上，属性'hidden'被分配给一个永远不会被显示/阅读（！）给用户的元素 - 而这里的'永不'在任何情况下都意味着''。引用[doc]（http://www.w3.org/html/wg/drafts/html/master/single-page。html＃the-hidden-attribute），“隐藏的属性不能用于隐藏可以在其他演示文稿中合法显示的内容”。 – raina77ow

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

例如：

比方说，你的元素变量是一个div。当你调用

element.setAttribute("hidden", true);

元素现在这个样子：

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

当你调用

element.style.visibility = "hidden";

您将获得：

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

来源

2013-12-11 11:46:25 MDiesel

不要使用'true'，而应使用''''来保存8个字节的内存。对不起，我是一个微型表演怪胎，所以我不得不说。 –

哇，我猜你是。良好的召唤。我得到了投票权。谢谢 – MDiesel

隐藏元素：Javascript属性和CSS样式之间的区别

回答

相关问题