Leo*_*Leo 11 html javascript css jquery
我正在使用此脚本来允许用户更改背景颜色...
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;
}
Tem*_*fif 11
首先,您可以简化设置颜色的逻辑,如下所示:
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var color = localStorage.getItem('color');
if (color != '') {
document.body.style.backgroundColor = color;
}
});
如果本地存储了某些内容,则只需更改颜色,否则将自动使用CSS中指定的默认颜色.
为了快速更改,您可以删除任何事件并将您的脚本放在head标记中,而不是定位body元素,您可以定位该元素,html并且由于背景传播,您将获得相同的结果:
<!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>该片段正在本地更改代码测试以获得更准确的结果.
您需要使用不同的事件onreadystatechange。这个在 之前触发onload。我玩了一下这些功能，并将“橙色”设置为该事件的默认值，另一个设置为单击“关闭”按钮，因为我禁用了代码中不存在的 cookie 内容。笔记; 如果您希望脚本运行得尽可能快，请执行此操作。（红色）作为调用（绿色）作为自执行。
我添加了一个console.log，这样您就可以看到颜色确实根据事件从红色变为橙色再变为蓝色（发生得很快，请参阅日志时间）
(window.getColor=function (c) {
var favColor = document.body.style.backgroundColor;
var color = !!c ? c : "#FFFAFF"; //getCookie('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
console.log(color);
})('green');
function setColor(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
//setCookie('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
} else {
getColor("#DAFFFA");
}
}
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
//dom is ready, window.onload fires later
getColor("orange");
}
};
document.onclick = setColor;
window.onload = function() {
getColor('blue');
};
getColor('red');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;
}<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background: #e8e8e8; background-size: 100% 100%;" rel="nofollow"></span>小智 5
不要忽视老式 Javascript 的强大功能：在正确的位置有效地使用 document.write，例如在“head”标签的末尾。
<head>
<link rel="stylesheet" type="text/css" href="..."/>
<script type="text/javascript">
(function(){
var color = localStorage.getItem('color');
if(typeof(color) === "string" && color != "") {
document.write("<style type=\"text\/css\">body{background-color:" + color + ";}</style>");
}
}());
</script>
</head>