尝试使用javascript根据一天中的时间更改导航栏的颜色

我四处张望，但找不到解决办法。我不知道该怎么办，希望有人能帮助我。 我不断地发现这个错误：

未捕获的TypeError:无法设置未定义的属性“backgroundColor” 在header.js:7

这是我的js：

   var today = new Date().getHours(); // Creërt een "new data object.
   var color = document.getElementsByClassName('navbar');


   // colors based on time of day 
   if (today >= 18) {
   color.style.backgroundColor = 'pink';
   } else if (today >= 12) {
   color.style.backgroundColor = 'yellow';
   } else if (today >= 0) {
   color.style.backgroundColor = 'blue';
   } else {
   color.style.backgroundColor = 'black';
   }

以下是我的html以防万一：

   <nav class="navbar">
        <a href="home.html">
        title
        </a>
    </nav>

希望有人能帮忙

document.getElementsByClassName('navbar');

---

此代码行返回HTMLCollection（数组）。您应该迭代样式的集合。backgroundColor

文档。getElementsByClassName（'navbar'）

返回一个数组。如果只有一个导航栏，则可以使用

document.getElementsByClassName（'navbar'）[0]，这将获得第一个实例，但不是最佳实践

或者，更好的是，您可以使用
document.getElementById（'navbar'）
并为您的navbar指定一个navbar id，而不是类

希望有帮助！您正在做的所有其他操作都应该有效。
为什么不使用
.getElementById（）
，因为这样只会选择一个元素

这方面的代码如下所示


var today=new Date（）.getHours（）；//Creërt een“新数据对象。
var color=document.getElementById（'navbar'）；
//基于一天中的时间的颜色
如果（今天>=18）{
color.style.backgroundColor='粉红色'；
}否则如果（今天>=12）{
color.style.backgroundColor='黄色'；
}否则如果（今天>=0）{
color.style.backgroundColor='蓝色'；
}否则{
color.style.backgroundColor='黑色'；
}

getVyClassName
返回一个arraylike。您必须选择该数组的一个/所有元素并对其应用样式。这会有所帮助。但我使用类是因为我想在不同的页面上使用它。如果页面是分开的，您不应该在两个页面上使用相同的Id。两种方法都可以尝试，但通常不需要t使用
文档。GetElementsByCassName（'navbar'）[0]
。这就是你所需要的吗？实际上你知道我如何使用渐变颜色吗？你应该能够像平常一样使用渐变，你可以在HTML
style=“”
标记中放置的任何东西都可以通过JS应用。我得到了这行代码，但它似乎不起作用：
document.getElementsByClassName('navbar');