Javascript 我尝试使用当前时间更改背景的颜色

我试图运行我的代码，但它不起作用

我已经尝试使用一个“color”变量，使用rgb（x，x，x）代码#xxxx，没有引号

var thehours = new Date().getHours();
if (thehours >= 0 && thehours < 12) {
     document.body.style.backgroundColor = "white";
} else if (thehours >= 12 && thehours < 18) {
    document.body.style.backgroundColor = "grey";
} else if (thehours >= 18 && thehours < 24) {
    document.body.style.backgroundColor = "black";  
}

var thehours=newdate（）.getHours（）；
如果（小时数>=0&&小时数<12）{
document.body.style.backgroundColor=“白色”；
}否则如果（小时数>=12和小时数<18）{
document.body.style.backgroundColor=“灰色”；
}否则如果（小时数>=18和小时数<24）{
document.body.style.backgroundColor=“黑色”；
}

---

在控制台中，我得到这样一个“未捕获的TypeError:无法读取design.js:3处null的属性'style'”

脚本是否在

标记中？如果是这样，请尝试将

defer

添加到

标记中

例如：

<script type="text/javascript" src="design.js" defer></script>

---

您需要确保在运行脚本之前定义了

document.body

元素（例如，如果在

文档的

中运行脚本，则不会定义

body

）

确保定义

document.body

的一种方法是将脚本包装在

document

对象上的

DOMContentLoaded

事件处理程序中，如下所示：

/*在文档上设置DOMContentLoaded事件处理程序以确保
只有在定义document.body之后，脚本才会运行*/
document.addEventListener（'DOMContentLoaded'，function（）{
/*此脚本仅在触发整个页面的“加载”事件后运行
这意味着将定义body元素*/
var thehours=新日期（）.getHours（）；
如果（小时数>=0&&小时数<12）{
/*为这个演示修改*/
document.body.style.backgroundColor=“蓝色”；
}否则如果（小时数>=12和小时数<18）{
document.body.style.backgroundColor=“灰色”；
}否则如果（小时数>=18和小时数<24）{
document.body.style.backgroundColor=“黑色”；
}    
});这应该可以工作，但可能是在错误的位置调用的，应该在页面加载后调用，我建议将其放在身体末端的标记中，或者您可以使用按钮将其放在函数中
它在html页面中工作……您在哪里调用此函数？好像是在身体被定义之前被执行的。也许你在
头中调用它而不等待DOM加载？不，我的脚本在一个名为“design.js”的文件中，这是我的头：文档Html文档从上到下解析/加载，每次解析器遇到
脚本
标记，它将暂停解析并立即执行脚本。由于在脚本执行时尚未解析body标记，因此未定义
document.body
（即它是
未定义的
）
defer
告诉解析器完成对整个html文档的解析，然后执行脚本。因为您的脚本有defer标记，它现在在定义了
主体之后执行，因此它可以按预期工作。希望有助于理解！