我有一个简单的页面:
value
默认情况下,正文背景颜色由类<html>
...
<body class="bg-black">
...
</body>
定义。现在,我希望页面具有随机颜色。我有一个使用jQuery的javascript函数,该函数删除了当前类并为背景色设置了新的随机类。
问题是出现了闪烁:页面首先显示黑色背景(bg-black
),然后过一会儿,通过javascript更改了body类,并应用了随机颜色(即random class是设置)。
我想消除这种闪烁,即消除初始的机身颜色。
我的JavaScript在bg-body
之后执行:
</body>
我不能为此使用后端。有没有办法在渲染页面之前更改正文的类?
答案 0 :(得分: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>
答案 1 :(得分:-1)
true