理解HTMLElement.hidden

Question

MDN说：

这与使用CSS属性显示来控制元素的可见性非常不同。

不过，我确实注意到，当我将一个元素隐藏起来时，它会得到display: none;。

.hidden = true在什么方面与设置display: none;不同

Answer 1

一个是HTML，另一个是CSS。HTML用于语义，而CSS用于样式化。一些HTML元素和属性碰巧带有默认样式，这取决于用户代理。

因此，这就像<strong> (在大多数用户代理中默认显示为粗体)和<span style="font-weight: bold">之间的区别。

Answer 2

归根到底，归根结底是：

display:none完全隐藏页面中的元素。它没有渲染。您仍然可以通过DOM与它交互，但是没有为它分配空间，并且它不会影响页面上的任何其他元素。

visibility:hidden只隐藏元素，但空格仍然是。它会影响页面上的其他元素。你看不见它，但你能看到它的空间