DOM“隐藏”的预期用法与CSS“可见性”道具有何不同？

Question

有DOM property hidden和CSS property visibility。看完他们的描述后，我真的无法确定何时使用。它们的预期用途在哪些方面有所不同？

我了解他们在功能上可能会做很多事情，但是我在说意图。

Answer 1

CSS可见性用于隐藏元素 并为文档布局中的隐藏元素分配空间 。与DOM Hidden相对，后者仅隐藏元素使其不显示在页面上，而没有为给定元素分配空间。

也许您正在寻找func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) { if searchBar.text == nil || searchBar.text == "" { inSearchMode = false view.endEditing(true) self.tableView.reloadData() } else { inSearchMode = true filteredData = contactList.filter { $0.givenName.range(of: searchBar.text!, options: [.caseInsensitive, .diacriticInsensitive ]) != nil || $0.familyName.range(of: searchBar.text!, options: [.caseInsensitive, .diacriticInsensitive ]) != nil || $0.phoneNumbers.range(of: searchBar.text!, options: [.caseInsensitive, .diacriticInsensitive ]) != nil } self.tableView.reloadData() } } ？

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

Answer 2

预期用途

在链接的页面上说明了hidden的预期用法（以及明确表示不使用时的用法）：

  

hidden全局属性是一个Boolean属性，指示该元素尚未或不再相关。例如，它可以用于隐藏在登录过程完成之前无法使用的页面元素。

     

必须禁止使用hidden属性 隐藏可以合法地在其他演示文稿中显示的内容。例如，在选项卡式对话框中使用“隐藏”来隐藏面板是不正确的，因为选项卡式界面只是一种溢出演示文稿—同样可以在一个大页面中用滚动条显示所有表单控件。同样，使用此属性仅隐藏一个演示文稿中的内容也是不正确的-如果某些内容被标记为隐藏，则它对于所有演示文稿（包括例如屏幕阅读器）都是隐藏的。

正常显示：

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

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

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

[隐藏]

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

.inner {
  background-color: #ccc;
  height: 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 class="inner"></div>
</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;

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

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

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

Answer 3

看，如果您使用可见性道具。在css中，您将在html中看到一个包含您css元素的“自由”空间。如果使用隐藏的DOM，它只会删除该元素。我这样解释。

Answer 4

同时使用具有隐藏值的css可见性属性和html hidden属性的目的在于隐藏元素。但是它们之间几乎没有区别。具有隐藏值的css可见性属性包含其高度和宽度的区域。但是隐藏属性不包含其DOM区域。在这里，隐藏属性的工作方式类似于css display属性，其值为none。以下示例可能会让您很清楚：

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

现在只需检查浏览器并检查，两者都不可见，但第一段元素仍包含其区域。