我正在使用这个脚本来允许用户更改背景颜色...
document.onclick = function SetFavColor(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
localStorage.setItem('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
}
};
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var favColor = document.body.style.backgroundColor;
var color = localStorage.getItem('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
});
CSS:
body {
max-width: 100%;
min-width: 100%;
height: 100%;
font-family: normal;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
.AvcGbtn {
display: inline-block;
width: 2em;
height: 2em;
}
HTML:
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span>
这是可行的，但问题是它会在页面完全加载后显示所选颜色。我想在页面加载之前显示用户选择的颜色。
示例:背景颜色为白色，用户选择红色。脚本在选择前显示白色背景色，在用户选择红色后，脚本将背景色更改为红色。我该怎么做？
这正是我想用 Javascript 做的，例如 CSS
body:before {
background-color: red;
}
最佳答案
首先，您可以简化设置颜色的逻辑，如下所示:
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var color = localStorage.getItem('color');
if (color != '') {
document.body.style.backgroundColor = color;
}
});
如果本地存储了某些东西，您只需要更改颜色，如果没有，将自动使用 CSS 中指定的默认颜色。
为了快速更改，您可以摆脱任何事件并将您的脚本放在 head 标记中，而不是针对 body 元素，您可以针对html 一个，由于 background propagation，您将得到相同的结果:
<!DOCTYPE html>
<html>
<head>
<!-- coloration -->
<style>html {background:red} /*default color*/</style>
<script>
var color ="blue" /*localStorage.getItem('color')*/;
if (color != '') {
document.documentElement.style.backgroundColor = color;
}
</script>
<!-- -->
</head>
<body>
</body>
</html>该片段正在更改代码，您需要在本地进行测试以获得更准确的结果。
关于javascript - 如何在页面完全加载之前用 JS 设置正文背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53836827/