DOM'hidden'的预期用法与CSS'visibility'属性有何不同?

CSS可见性用于隐藏元素 并为文档布局中的隐藏元素分配空间 . 与DOM Hidden相反,DOM Hidden只是隐藏元素,使其不显示在页面上,而不为给定元素分配空间。

也许你在找 display: none ?

What is the difference between visibility:hidden and display:none?

预期用途

hidden (以及明确何时

这个 全局属性是 Boolean 表示

这个 属性 不得使用

正常显示:

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}

<div class="box">
  <div class="inner"></div>
</div>

[隐藏]

.盒子{
背景色:#f0;
填料:50px;

.内部{
背景色:#ccc;
高度:200px;

<div class="box">
  <div class="inner" hidden></div>
</div>

visibility: hidden;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
  visibility: hidden;
}

<div class=“box”>
</div>

display: none;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  display: none;
  height: 200px;
}

<div class=“box”>
<div class=“inner”></div>
</div>

HTMLElement.prototype.hidden

document.querySelector('.inner').hidden = true;

.盒子{
背景色:#f0;
填料:50px;
}

.内部{
背景色:#ccc;

<div class=“box”>
<div class=“inner”></div>
</div>

听着,如果你用能见度道具。在css中,你将在html中看到一个包含css元素的“空闲”空间。如果使用DOM hidden,它只会删除该元素。我这么解释。

同时使用css的visibility属性和html的hidden属性来隐藏元素。但它们之间没有什么区别。带有隐藏值的css可见性属性包含它的区域,即它的高度和宽度。但hidden属性不包含其DOM区域。这里隐藏属性的工作方式类似于css display属性,值为none。您可能会清楚地看到以下示例:

<p style="visibility:hidden">Hello how are you?</p>
<p hidden>I am fine.</p>