带有 display: none 的元素的行为是什么？答案

【问题标题】：What's the behavior of an element with display: none?带有 display: none 的元素的行为是什么？
【发布时间】：2022-11-21 07:33:48
【问题描述】：

我对 display: none 属性有点困惑。互联网上的许多文章都说将显示属性设置为没有任何元素不在 DOM 树中。这就是与 opacity: 0 和 visibility: hidden 的区别，后者不会从 DOM 中删除元素，只是使其不可见。

来自https://stackoverflow.com/a/4718378/20395932

因为 display: none 实际上是从 DOM 中移除元素。可见性：隐藏只是让它们不可见，但它们仍然存在那里。

来自https://blog.kevinchisholm.com/css/visibility-hidden-vs-display-none/

这是一个重要的细节，因为使用 display:none，你有效地从 DOM 中删除元素。

我也读过

浏览器不会响应使用的元素的任何事件显示：无或可见性：隐藏。

但是在 React 中，我为一个元素设置了一个 ref，将它的显示属性设置为无……我仍然在开发工具的 DOM 中看到该元素。我也可以通过 ref 调用这个元素的点击处理程序。此外，我不明白display: none 如何从 DOM 中删除任何元素，如果它只是一个 CSS 属性并且不能真正操作 DOM。

据我了解，带有display: none 的元素仍在 DOM 中，但只是没有呈现。但是如何响应事件呢？

【问题讨论】：

标签： html css

【解决方案1】：

,,, display 属性设置为 none 元素不在 DOM 树中。

那是错误的。

display 属性设置为 none 的元素在黄杨树. DOM 中的所有后代节点也不会在框树中生成框或文本运行。

【讨论】：