更改背景颜色动画不起作用

问题描述

我正在尝试使用按钮使主体的背景颜色每秒更改一次。由于其他原因，我需要在单击按钮时更改背景（我无法使用正常间隔、超时或 @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>

默认设置白色！

click click html javascript