Question

我有一个简单的页面：

value

默认情况下，正文背景颜色由类<html> ... <body class="bg-black"> ... </body>定义。现在，我希望页面具有随机颜色。我有一个使用jQuery的javascript函数，该函数删除了当前类并为背景色设置了新的随机类。

问题是出现了闪烁：页面首先显示黑色背景（bg-black），然后过一会儿，通过javascript更改了body类，并应用了随机颜色（即random class是设置）。

我想消除这种闪烁，即消除初始的机身颜色。

我的JavaScript在bg-body之后执行：

</body>

我不能为此使用后端。有没有办法在渲染页面之前更改正文的类？

Answer 1

问题仅仅是因为body元素开始以一种颜色呈现，并且由于script的位置，后来它又变为另一种颜色。

仅供参考：：将</body>标记之后的代码放置在html标记之后是无效的。

因此，需要在解析body元素之前设置最终颜色，这意味着JavaScript在文档的head部分中运行

第一把script放在head部分中。这将允许它在遇到body标记之前进行处理。这将导致在解析body标签之前建立背景颜色，因此您将不会获得一种颜色，然后再获得另一种颜色。

现在，您无法访问body元素，因为解析器尚未到达该元素，因此您的JavaScript代码无法尝试更改body。但是，您可以让JavaScript使用CSS Object Model (CSSOM)动态创建或修改预先存在的CSS样式表规则。

第二，不要使用jQuery $()（document.ready()）模式。您希望initPage()函数立即运行。实际上，您真的不希望或不需要将代码捆绑到一个函数中，因为它只需要运行一次，并且需要在遇到后立即运行。

以下代码在Stack Overflow代码段环境中无法在此处工作，但是在here's a link to a CodePen上您可以看到它正常工作（只需刷新页面以查看所应用的新颜色）。

<!DOCTYPE html>
<html>
<head>

  <style>
    body {
     background-color: red;
    }
  </style>
  
  <script>
    // Possible colors:
    let colors = ["green","yellow","orange","teal","grey"];
    
    // Get reference to stylesheet
    var stylesheet = document.styleSheets[1];
    
    // Pick a random color from the array
    let newColor = colors[Math.floor(Math.random() * colors.length)];
    
    // Edit the existing stylesheet rule for body to use random color
    stylesheet.cssRules[0].style.backgroundColor = newColor;
  </script>
  
</head>
<body>


</body>
</html>

在呈现页面之前应用随机主体类以避免闪烁？

2 个答案: