Question

我在这里找到了一些关于此的内容，但我有一个奇怪的问题。

我的代码是：

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/，但如果我尝试在我的网站或本地，dubugger告诉我：未捕获TypeError：无法调用方法'setAttribute'为null

有人可以帮助我吗？我需要将班级改为不同的div。

Answer 1

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

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事件侦听器之外运行它，脚本将在JavaScript DOM中创建之前尝试查找具有id="cielo"的元素。

这在jsfiddle中工作的原因是因为jsfiddle会自动将其添加到任何运行的脚本中。要停用该功能，请转到左侧边栏，然后在现在显示onLoad的下拉列表中，选择No wrap - in <head>。

基于时间的JS for Dynamic CSS

1 个答案: