Question

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

未捕获的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>

和我的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>

Answer 2

document.getElementsByClassName('navbar');

此代码行返回HTMLCollection（Array）。您应该遍历 style.backgroundColor

的集合

Answer 3

document.getElementsByClassName('navbar')返回一个数组。如果只有一个导航栏，则可以使用document.getElementsByClassName('navbar')[0];，这将使您获得第一个实例，但这不是最佳实践。

或者更好的是，您可以使用document.getElementById('navbar')并为导航栏指定导航栏的ID而不是类。

希望有帮助！您正在做的所有其他事情都应该起作用。

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

3 个答案: