Question

2020-11-24

806

javascript html

因此，我目前正在使用 JavaScript 制作加载屏幕。我正尝试在加载屏幕之前将 display: none; 添加到所有元素中。

我尝试过这种方法：

var elements = document.querySelectorAll( 'body > *' );
elements.style.display="none";

但它只是显示为

Uncaught TypeError: Cannot set property 'display' of undefined
    at <anonymous>:2:23

我该怎么做？

Answer 1

这是使用 forEach 方法的解决方案。

注意！如果您将其称为 ('body *') ，则所有元素都将被设置样式，包括所有子元素。但是如果您将其称为 ('body >*') ，则样式将分配给所有表面元素，但不分配给内部元素。

var elements = document.querySelectorAll('body *');
elements.forEach(function(element) {
  element.style.display = "none";
});

<div><p>1</p></div>
<div><p>2</p></div>
<a>3</a>

Answer 2

在这里，您的元素变量不是特定元素，而是元素的 NodeList（一种数组），因此您必须循环将样式应用于每个元素：

var elements = document.querySelectorAll( 'body > *' );
for(var i = 0; i < elements.length; i++) elements[i].style.display="none";

但请确保您的脚本不会在元素加载到页面上之前执行。如果是这样，您可能需要等待 domready，或使用 domMutationObserver API 来执行这些操作 ;)