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

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

javascript html

Javascript 在呈现页面之前应用随机主体类以避免闪烁？,javascript,html,Javascript,Html,我有一个简单的页面： <html> ... <body class="bg-black"> ... </body> 我无法使用后端进行此操作。有没有办法在呈现页面之前更改主体的类别？问题仅仅是因为主体元素开始以一种颜色呈现，并且由于脚本的位置，它稍后会更改为另一种颜色仅供参考：在标记之后放置任何代码都是无效的，除了结束html标记之外因此，需要在解析body元素之前设置最终颜色，这意味着在文档的head部分运行JavaScript 首先，将您的脚本放在标

我有一个简单的页面：

<html>
...
<body class="bg-black">
...
</body>

我无法使用后端进行此操作。有没有办法在呈现页面之前更改主体的类别？

问题仅仅是因为

主体

元素开始以一种颜色呈现，并且由于

脚本

的位置，它稍后会更改为另一种颜色

仅供参考：在

标记之后放置任何代码都是无效的，除了结束

html

标记之外

因此，需要在解析

body

元素之前设置最终颜色，这意味着在文档的

head

部分运行JavaScript

首先，将您的

脚本

放在

标题

部分。这将允许它在遇到

主体

标记之前进行处理。这将导致在解析

body

标记之前建立背景色，因此您不会得到一种颜色和另一种颜色

现在，此时您无法访问

body

元素，因为解析器尚未到达该元素，因此您的JavaScript代码无法尝试更改

body

。但是，您可以让JavaScript使用动态创建或修改预先存在的CSS样式表规则

其次，不要使用jQuery

$（）

（

document.ready（）

）模式。您希望立即运行

initPage（）

函数。事实上，您确实不希望或不需要将代码捆绑到函数中，因为它只需要运行一次，并且需要在遇到它时立即运行

下面的代码在堆栈溢出代码段环境中不起作用，但您可以在其中看到它起作用（只需刷新页面以查看应用的新颜色）


身体{
背景色：红色；
}
//可能的颜色：
让颜色=[“绿色”、“黄色”、“橙色”、“青色”、“灰色”]；
//获取对样式表的引用
var stylesheet=document.styleSheets[1]；
//从数组中选择一种随机颜色
让newColor=colors[Math.floor（Math.random（）*colors.length）]；
//编辑主体的现有样式表规则以使用随机颜色
stylesheet.cssRules[0]。style.backgroundColor=newColor；


你好，世界
var color=[“绿色”、“红色”、“黄色”、“橙色”、“粉色”]；
var rand_color=color[Math.floor（Math.random（）*color.length）]；
document.body.style.backgroundColor=随机颜色；

@Adriani6但我一定有办法做到这一点-我的意思是，以某种方式欺骗它。@Adriani6这不是真的。JavaScript会在遇到时执行，它会阻止UI呈现。作为一个简单的测试，只需在任何包含内容的页面的

标题中添加alert（）
，在清除alert（）
之前，您将看不到内容。在
之后添加任何代码都是无效的。现在阅读我的评论-我可以看到问题的症结所在。我在最后几句话中把自己说错了。用CSS转换使闪烁的效果更好怎么样。style此时不可用。加载页面后，您可以随时设置样式。
...
</body>
<script>
    $(function () {initPage();});
</script>
</html>