尝试使用 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