Question

例如，如果我们有：

<style>
.child {display:none;}
</style>

<script>
$('.parent:contains("Invisible")').addClass('newparent');
</script>

<div class="parent">
   <div class="child">Invisible</div>
</div>

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

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

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

Answer 1

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

MDN display

Answer 2

我总是相信如果我把display：none，就是这样，元素就消失了。您无法在检查元素，查看源等中找到它。

您的假设不正确。该元素仍然是DOM的一部分。只是样式才能在屏幕上显示。

所以我想知道带有display：none的元素是否还会影响性能？

不会超过任何其他元素。如果您有这么多元素影响性能，那么您当然希望解决这个问题。但它与造型没什么关系。

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

它是内存中的 em 结构的一部分。关于它的一切仍然存在。它只是在视口中显示。

CSS样式并没有改变HTML的结构。它只管理该结构在屏幕上的显示方式。（或者在其他一些媒介中。）另一方面，JavaScript可用于修改内存中的DOM，这些更改也会反映在显示中。（正如你的测试所示。）

为什么javascript会读取有display：none的元素？

2 个答案: