你还能用 display: none 影响元素的状态吗？答案

【问题标题】：Can you still affect the state of an element with display: none?你还能用 display: none 影响元素的状态吗？
【发布时间】：2014-03-28 14:35:16
【问题描述】：

根据Mozilla Doc，CSS 属性display 的值none 执行以下操作：

关闭元素的显示（对布局没有影响）；所有后代元素的显示也会关闭。文档呈现为好像该元素不存在。

我知道这意味着我看不到元素。由于该元素对布局没有影响，因此它看起来好像它不存在。

我的问题是：它是否仍然存在于布局中（它仍然响应用户事件）？或者它根本不存在于布局中（因此不仅仅是外观）？

澄清一下：

我知道该元素仍然存在于 DOM 中。我在问与视图的交互是否仍会影响该元素的状态。例如，如果我点击隐藏元素所在的位置，是否仍会触发事件？

我问是因为我知道您可以像这样定位 CSS 中的隐藏元素：

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + otherElement {
   ...
}

必须触发某些事件，否则第二个 CSS 选择器将不起作用。

谁能解释一下？

【问题讨论】：

它被隐藏了。你会如何点击它？ @Xander：不，你不能关注隐藏的输入。
@Xander：你的意思是模糊来自，不是吗？当您隐藏当前具有焦点的字段（例如 Opera 故障）时会发生什么确实很有趣，blur 事件可能不会立即触发。

标签： html css dom browser

【解决方案1】：

例如，如果我点击隐藏元素本来存在的位置，这还会触发事件吗？

没有所谓的“点击隐藏元素所在的位置”。

例如，如果一块砖没有用于盖房子，你不能通过触摸另外两块砖之间的线来触摸它，即使它本来可以在那里。

因此，没有用户引起的事件适用于布局中未包含的不可见对象。

但是我很确定它仍然会产生其他事件，例如 MutationObserver 报告的事件。我希望dispatchEvent 发送的事件也能正常工作，尽管我没有对此进行测试。

【讨论】：

【解决方案2】：

您不能通过直接与元素交互来影响display: none 元素的状态，因为该元素不会被渲染。但是，您仍然可以通过与触发事件的其他元素交互来影响其状态，而这些事件又会通过 DOM 更改该元素的状态。

必须触发某些事件，否则第二个 CSS 选择器将不起作用。

谁能解释一下？

状态和事件完全不同。不需要触发事件来改变元素的状态，并且当元素改变其状态时，它不一定会触发任何事件。选择器从不对事件进行操作；它们总是基于状态的。

在您的示例中，如果 input 元素已经通过 checked 属性进行了检查，则 DOM 会以该状态开始加载该元素，并且不会触发任何事件，它仍然允许 @ 987654325@ 立即匹配选择器。此外，它将继续匹配该选择器，直到发生某些事情导致 input 变为未选中状态（或在 CSS 选择器术语中，:not(:checked)）。

请参阅我对this other question 的回答，了解有关 CSS 中状态与事件的更多解释。

【讨论】：

有趣。那么你是说复选框的状态实际上受到冒泡的影响吗？隐藏时未选中复选框的状态实际上发生了什么变化？
@linstantnoodles：它可以是任何东西，而不仅仅是冒泡。您可以使用选择器通过 DOM 直接查询该元素，并将其 checked 属性设置在事件中或事件之外。
隐藏复选框的状态变化是鼠标点击引起的。所以从技术上讲，该复选框仍然存在于布局中，否则浏览器将无法判断该复选框已被单击！
@linstantnoodles：鼠标点击哪里，到底是哪里？如果它被渲染，它不应该响应点击它“会”在哪里。但是，如果您有一个与之关联的标签，那么该标签可以很好地为您切换复选框。
但是标签是同级的 - 为什么标签中的事件会影响复选框？

【解决方案3】：

它不会影响您的布局，就好像它不存在一样，但内容仍然存在于 HTML DOM 中。 CSS 属性 display:none 就是这样 - 一个 CSS 属性，它不会修改您的 HTML 内容。

您仍然可以对元素执行 javascript 函数。

【讨论】：

我知道它仍然存在于 DOM 中。我想知道您是否仍然可以通过与布局的交互来影响元素的状态。
你可以像没有display:none一样对它执行任何你想做的事情。
@linstantnoodles 元素的“状态”是什么意思？此外，如果这些元素有与它们相关联的事件来改变它，那么与其他元素的交互也会影响该元素。
@linstantnoodles 只需阅读更新后的问题。不，单击元素应该存在的位置不会触发源自元素的事件。这是因为它不占用页面上的任何空间，因此您实际上无法单击它。附带说明一下，visibility: hidden 将使元素不可见，但仍会占用空间。