如何解决更改背景颜色动画不起作用
我正在尝试使用按钮使主体的背景颜色每秒更改一次。 由于其他原因,我需要在单击按钮时更改背景(我无法使用正常间隔、超时或 @keyframes)。 我不知道我的代码有什么问题。有什么想法吗?
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Stack Overflow</title>
</head>
<body>
<button id="click_me">Loaded</button>
<script type="text/javascript" defer>
const btn = document.getElementById("click_me");
const body = document.querySelector("body");
btn.onclick = () => {
if(body.style.backgroundColor == "white"){
body.style.backgroundColor = "black";
} else if(body.style.backgroundColor == "black"){
body.style.backgroundColor = "white";
}
}
setTimeout(()=>{
btn.click();
},1000);
</script>
</body>
</html>
解决方法
所以看起来身体的默认背景颜色真的是“透明的”。因此,当您检查白色值时,它从未找到。所以你只需要添加一个 OR 语句来检查透明值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Stack Overflow</title>
</head>
<body>
<button id="click_me">Loaded</button>
<script type="text/javascript" defer>
const btn = document.getElementById("click_me");
const body = document.querySelector("body");
// debug stuff
console.log(`Here is the default value of your body color:`)
console.log(body.style.backgroundColor)
btn.onclick = () => {
if(body.style.backgroundColor == "white" || body.style.backgroundColor == ""){
body.style.backgroundColor = "black";
} else if(body.style.backgroundColor == "black"){
body.style.backgroundColor = "white";
}
}
setTimeout(()=>{
btn.click();
},1000);
</script>
</body>
</html>
如果您不想这样做,您可以在加载时始终将主体颜色设置为白色。但是你真的很可能应该使用某种类型的重置Reset CSS。通过这种方式,您可以知道这样的值在所有浏览器中都是相同的,而不是稍后找出问题所在。永远不知道,也许背景颜色的默认值将来会更改为其他颜色。
,您的代码中有一个错误,您没有为主体设置背景颜色并尝试获取它,因此您每次都获得空值,并且您有基于白色和黑色的条件,所以没有' t 工作试试这个代码我已经在我的本地系统上运行了它现在可以工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Stack Overflow</title>
</head>
<body style="background-color: white;">
<button id="click_me">Loaded</button>
<script type="text/javascript" defer>
const btn = document.getElementById("click_me");
const body = document.querySelector("body");
btn.onclick = () => {
console.log(body.style.backgroundColor);
if(body.style.backgroundColor == "white"){
body.style.backgroundColor = "black";
} else if(body.style.backgroundColor == "black"){
body.style.backgroundColor = "white";
}
}
setTimeout(()=>{
btn.click();
},1000);
</script>
,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Stack Overflow</title>
</head>
<body id="body">
<button onclick="color();" id="click_me">Loaded</button>
<script type="text/javascript">
function color(){
var body1 = document.getElementById("body");
if(body1.style.backgroundColor == "white"){
body1.style.backgroundColor = "black";
} else if(body1.style.backgroundColor == "black"){
body1.style.backgroundColor = "white";
}
}
setTimeout(()=>{
document.body.style.backgroundColor = "white";
var btn = document.getElementById("click_me");
btn.click();
},1000);
</script>
</body>
</html>
默认设置白色!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。