gpt4 book ai didi

javascript - 基于时间的动态CSS的JS

转载 作者:行者123 更新时间:2023-11-28 11:22:46 24 4
gpt4 key购买 nike

我在这里找到了一些相关信息,但我遇到了一个奇怪的问题。

我的代码是:

var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 22) {
document.getElementById("cielo").setAttribute("class", "giorno");
} else {
document.getElementById("cielo").setAttribute("class", "notte");
}

它在 http://jsfiddle.net/Geimsiello/9d27v/ 上完美运行但如果我在我的网站或本地尝试,调试器会告诉我:Uncaught TypeError: Cannot call method 'setAttribute' of null

有人可以帮助我吗?我需要将类更改为不同的 div。

最佳答案

您可以通过在窗口加载后运行脚本来解决此问题:

addEventListener('load', function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 22) {
document.getElementById("cielo").setAttribute("class", "giorno");
} else {
document.getElementById("cielo").setAttribute("class", "notte");
}
});

这样,您要选择的元素就已经在页面上创建好了。如果你在 load 之外运行它事件监听器,脚本将尝试查找带有 id="cielo" 的元素在 JavaScript DOM 中创建它之前。

这在 jsfiddle 中起作用的原因是因为 jsfiddle 自动将它添加到任何运行的脚本中。要禁用它,请转到左侧的侧边栏,然后在显示 onLoad 的下拉列表中现在,选择 No wrap - in <head> .

关于javascript - 基于时间的动态CSS的JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21466922/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com