我正在尝试使用按钮使主体的背景颜色每秒更改一次。 由于其他原因,我需要在单击按钮时更改背景(我无法使用正常间隔、超时或 @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>
答案 0 :(得分:1)
所以看起来身体的默认背景颜色真的是“透明的”。因此,当您检查白色值时,它从未找到。所以你只需要添加一个 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。通过这种方式,您可以知道这样的值在所有浏览器中都是相同的,而不是稍后找出问题所在。永远不知道,也许背景颜色的默认值将来会更改为其他颜色。
答案 1 :(得分:0)
您的代码中有一个错误,您没有为主体设置背景颜色并尝试获取它,因此您每次都获得空值,并且您有基于白色和黑色的条件,所以没有' 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>
答案 2 :(得分:0)
<!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>
默认设置白色!