I wonder if there is any difference in the result when hiding an element with JavaScript attribute or CSS Style.
我想知道在隐藏带有JavaScript属性或CSS样式的元素时，结果是否有什么不同。
For example:
例如:
element.setAttribute("hidden", true);
vs
vs
element.style.visibility = "hidden";
I experimented a bit with those two possibilities. My assumption is, that when hiding it with JavaScript, the element is truly hidden and taken out of the flow; and when hiding with CSS Style the element is just not shown but still there.
我尝试过这两种可能性。我的假设是，在使用JavaScript隐藏元素时，元素确实被隐藏并从流中取出;当使用CSS样式隐藏时，元素不会显示，但仍然存在。
Mostly this seemed right in my experiments, but sometimes not. So, what is the real difference between those two possibilities?
在我的实验中，大多数情况下这似乎是对的，但有时不是。那么，这两种可能性之间的真正区别是什么呢?
2 个解决方案
#1
9
There's two basic methods for hiding an element with CSS:
使用CSS隐藏元素有两种基本方法:
Firstly, there's visibility: hidden; (or element.style.visibility = "hidden";). This simply makes the item invisible. It still takes up space in the document, it's still part of the flow.
首先,有可见性:隐藏;(或element.style。可见性=“隐藏”;)。这只会使物品隐形。它仍然占据文档中的空间，它仍然是流的一部分。
Then there's display: none; (or element.style.display = "none";). This removes the element from the flow of the document entirely. It's still present in the DOM, it's just not rendered to the page.
然后有显示:没有;(或element.style。显示=“没有”;)。这完全从文档的流程中移除元素。它仍然存在于DOM中，只是没有呈现在页面中。
HTML5's hidden attribute (or element.setAttribute("hidden", true);) is roughly equivalent to display: none;.
HTML5的隐藏属性(或元素)。setAttribute(“hidden”，true)大致相当于display: none;。
In fact, to give older browsers compatibility with the attribute, this is often added to the stylesheet:
事实上，为了使旧浏览器与属性兼容，通常会将其添加到样式表中:
[hidden] { display: none; }
#2
4
The difference between these two lines of code is that one of them adds an attribute to the element with the given value, while the other sets a property within the style declaration.
这两行代码的不同之处在于，其中一行代码向元素添加了一个具有给定值的属性，而另一行代码在样式声明中设置了一个属性。
For instance:
例如:
Let's say that your element variable was a div. When you call
假设你的元素变量是div
element.setAttribute("hidden", true);
The elements will now look like this:
元素现在看起来是这样的:
<div hidden="true"></div>
When you call
当你打电话
element.style.visibility = "hidden";
You will get:
你将得到:
<div style="visibility: hidden;"></div>
#1
9
There's two basic methods for hiding an element with CSS:
使用CSS隐藏元素有两种基本方法:
Firstly, there's visibility: hidden; (or element.style.visibility = "hidden";). This simply makes the item invisible. It still takes up space in the document, it's still part of the flow.
首先,有可见性:隐藏;(或element.style。可见性=“隐藏”;)。这只会使物品隐形。它仍然占据文档中的空间，它仍然是流的一部分。
Then there's display: none; (or element.style.display = "none";). This removes the element from the flow of the document entirely. It's still present in the DOM, it's just not rendered to the page.
然后有显示:没有;(或element.style。显示=“没有”;)。这完全从文档的流程中移除元素。它仍然存在于DOM中，只是没有呈现在页面中。
HTML5's hidden attribute (or element.setAttribute("hidden", true);) is roughly equivalent to display: none;.
HTML5的隐藏属性(或元素)。setAttribute(“hidden”，true)大致相当于display: none;。
In fact, to give older browsers compatibility with the attribute, this is often added to the stylesheet:
事实上，为了使旧浏览器与属性兼容，通常会将其添加到样式表中:
[hidden] { display: none; }
#2
4
The difference between these two lines of code is that one of them adds an attribute to the element with the given value, while the other sets a property within the style declaration.
这两行代码的不同之处在于，其中一行代码向元素添加了一个具有给定值的属性，而另一行代码在样式声明中设置了一个属性。
For instance:
例如:
Let's say that your element variable was a div. When you call
假设你的元素变量是div
element.setAttribute("hidden", true);
The elements will now look like this:
元素现在看起来是这样的:
<div hidden="true"></div>
When you call
当你打电话
element.style.visibility = "hidden";
You will get:
你将得到:
<div style="visibility: hidden;"></div>