Question

我对此很新，所以如果有明显的答案，我很抱歉。

我正在尝试在我的主页上获取照片，以便根据一天中的时间进行更改。我发现了大量有关更改网站背景的信息，但我想更改主页上的图像，而不是身体标记的背景。

我尝试按照此处的信息：Changing background based on time of day (using javascript)并在其中一条评论中建议更改课程而不是图片，这样您就可以更改除了背景图片之外的其他内容。

我试图遵循这个建议，但它没有用。

这就是我的breakfast-lunch.js文件中所说的：

var currentTime = new Date().getHours();
if (6 <= currentTime && currentTime < 12) {
if (document.body) {
    document.body.className = "breakfast";
}
}
else {
if (document.body) {
    document.body.className = "lunch";
}
}

我有以下css：

.breakfast .home-photo { 
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

.lunch .home-photo { 
background-image: url('images/Miriam-Joy-Photo-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

在我尝试使用JS并更改类名之前，我只使用了这个CSS并且效果很好，在div中放了一张照片并且看起来很好：

.home-photo { 
background-image: url('images/Maddie-Lab-Studio-Home-Page.jpg');
background-size: 100%;
width: 100%;
height: 0;
padding-top: 61%;
text-indent: -9999px;}

如果相关，我的网站是WordPress网站。

我很茫然。任何帮助将不胜感激。您可以在http://www.canvas.kgshultz.com

找到我（不正常工作）网站的示例

提前致谢！

Answer 1

FIX将是CSS方面，javascript很好（只在console.log中检查）

改变这个：

.breakfast .home-photo { 
}

到此：

.breakfast, .home-photo { 
}

课程之间缺少逗号（，）。

这是一个FIDDLE

Answer 2

检查完website后，我发现在breakfast上手动设置课程lunch或body会使所有内容按预期工作（图片分别针对每个课程显示）名称）。这让我觉得你的CSS实际上很好，把问题带到了JS

你的JS也可能没问题，但我在你提到的这个网站的任何地方都找不到它，而且身体上没有breakfast或lunch类的痕迹。当我尝试手动运行时，它也运行良好。所以请检查这个脚本是否真正使用过。

但是你应该小心你正在用这些线做什么：

document.body.className = "breakfast";

和

document.body.className = "lunch";

因为它们将完全覆盖您身体上的任何现有类。由于您使用的是CMS，因此您的身体最终会有足够的课程。请考虑使用此行：

document.body.className += " breakfast";

它将在当前值的末尾连接字符串breakfast（注意前导空格，因此两个不同的类不会彼此粘在一起）。

在一天的不同时间更改div背景

2 个答案: