为什么javascript读取具有display:none的元素

How come that javascript reads element that has display:none?

本文关键字：none 元素 display javascript 读取 为什么      更新时间：2023-09-26

例如，如果我们有：

<style>
.child {display:none;}
</style>
<script>
$('.parent:contains("Invisible")').addClass('newparent');
</script>
<div class="parent">
   <div class="child">Invisible</div>
</div>

此代码有效！父div 将收到新类新父。这对我来说没有逻辑，因为我一直相信如果我把 display：none 就是这样，元素就消失了。您在检查元素、查看源代码等中找不到它。

但显然，如果javascript可以找到它，情况并非如此。这意味着此元素以某种方式呈现。所以我想知道带有显示：none 的元素是否仍然存在，它会影响性能吗？例如，如果我们有右侧边栏，我们决定在移动设备上使用 display：none 将其隐藏。

根据经验，我知道如果侧边栏有 display：none，网站加载速度会更快，但问题仍然是一样的，带有 display：none 的元素会发生什么，它是否以某种方式呈现，如果是，如何以及在哪里？

你似乎对display:none有一些误解。它是一个 css 属性，它会导致元素不占用页面上的空间。该元素仍然呈现，并且仍然存在。

多功能显示器

我一直相信，如果我把显示：没有，就是这样，元素就消失了。您在检查元素、查看源代码等中找不到它。

你的假设是不正确的。 该元素仍然是 DOM 的一部分。 它只是被设计为不会在屏幕上明显呈现。

所以我想知道带有显示：none 的元素是否仍然存在，它会影响性能吗？

不比任何其他元素更多。 如果你有太多的元素会影响性能，那么你当然想解决这个问题。 但这与造型关系不大。

带有 display：none 的元素会发生什么，它是否以某种方式呈现，如果是，如何以及在哪里呈现？

它是内存中 DOM 结构的一部分。 关于它的一切都仍然存在。 它只是没有在视口中明显显示。

CSS 样式不会更改 HTML 的结构。 它只是控制该结构在屏幕上的可见显示方式。 （或其他媒体。 另一方面，JavaScript 可用于修改内存中的 DOM，这些更改也会反映在显示中。 （如您的测试所示。

相关文章：