开发者问题收集

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

2018-08-04
254

四处寻找但找不到解决方案。我不知道该怎么办,希望有人能帮助我。 我一直收到此错误:

未捕获的 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%);}

希望有人能帮忙。

3个回答

为什么不使用 .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>
Roy Scheffers
2018-08-04
document.getElementsByClassName('navbar');

此代码行返回 HTMLCollection(Array)。您应该迭代 style.backgroundColor

的集合
Samet Aylak
2018-08-04

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

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

希望这能有所帮助!您所做的其他一切都应该有效。

Kieran McWilliams
2018-08-04