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

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

例如：

element.setAttribute("hidden", true);

element.style.visibility = "hidden";

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

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

6576

2017-12-11 11:39

起源

实际上那是完全不同的野兽。事实上，你最好比较一下 display:none 风格搭配 hidden ATTR。 - raina77ow

好的和更好的区别将是答案 - Prasath K

答案:

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

首先，有 visibility: hidden; （要么 element.style.visibility = "hidden";）。这只会使物品不可见。它仍占用文档中的空间，它仍然是流程的一部分。

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

HTML5的 hidden 属性（要么 element.setAttribute("hidden", true);）大致相当于 display: none;。

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

[hidden] { display: none; }

2017-12-11 11:46

在实践中，是的，它们将是等价的。从理论上讲，属性 hidden 被分配给一个永远不应该向用户显示/读取（！）的元素 - 和 never 这意味着 in any situations possible。引用 DOC，“隐藏的属性不得用于隐藏可合法地在另一个演示文稿中显示的内容”。 - raina77ow

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

例如：

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

element.setAttribute("hidden", true);

元素现在看起来像这样：

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

你打电话时

element.style.visibility = "hidden";

你会得到：

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

2017-12-11 11:46

不要用 true而是使用 '' 保存8个字节的内存。对不起，我是一个微型表演狂，所以我不得不说。 - Jack Giffin

哇，我猜你是。好的召唤。我要投票了。谢谢 - MDiesel

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

答案:

热门问题

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