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

Question

环顾四周，但找不到解决方案。我不知道该怎么办，希望有人能帮助我。我不断收到此错误:

未捕获的类型错误:无法设置未定义的属性“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>

和我的CSS:

    .navbar {
    vertical-align: middle;
    padding: 0.5em 4em;
    box-shadow: 0px 0px 15px -2px rgba(31, 31, 31, 0.75);
    background: linear-gradient(to right, rgba(47, 132, 255, 1) 0%, rgba(110,236, 249, 1) 100%);}

希望大家帮忙。

Answer 1

为什么不使用 .getElementById() 而不是因为这只会选择一个元素。

此代码如下所示。

   var today = new Date().getHours(); // Creërt een "new data object.
   var color = document.getElementById('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';
   }

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