按月更改背景图片答案

【问题标题】：Change background image by month按月更改背景图片
【发布时间】：2014-09-22 04:25:28
【问题描述】：

我正在尝试根据季节更改元素的背景图像。我收到以下错误：

TypeError: document.getElementsByClassName(...).style is undefined

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;

// Summer
if (total >= 6 && total <= 8)
{
document.getElementsByClassName("banner-container").style.backgroundImage = "url('images/homepage-banners/winter-banner.jpg')";
}
// Autumn
else if (total >= 9 && total <= 11)
{
document.getElementsByClassName("banner-container").style.backgroundImage = "url('images/homepage-banners/fall-banner.jpg')";
}
// Winter
else if (total == 12 || total == 1 || total == 2)
{
document.getElementsByClassName("banner-container").style.backgroundImage = "url('images/homepage-banners/winter-banner.jpg')";
}
// Spring
else if (total >= 2 && total <= 6)
{
document.getElementsByClassName("banner-container").style.backgroundImage = "url('images/homepage-banners/spring-banner.jpg')";
}
else
{
document.getElementsByClassName("banner-container").style.backgroundImage = "url('images/homepage-banners/summer-banner.jpg')";
}

使用标记更新脚本，切换到 getElementById：

<div class="custom banner-container">
  <div id="home-banner">
     <div class="dmr-welcome">
        <img src="/dev/images/homepage-banners/dmr-banner1_07.jpg">
      </div>
   </div>
</div>

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;

// Summer
if (total >= 6 && total <= 8)
{
document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/winter-banner.jpg')";
}
// Autumn
else if (total >= 9 && total <= 11)
{
document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/fall-banner.jpg')";
}
// Winter
else if (total == 12 || total == 1 || total == 2)
{
document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/winter-banner.jpg')";
}
// Spring
else if (total >= 2 && total <= 6)
{
document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/spring-banner.jpg')";
}
else
{
document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/summer-banner.jpg')";
}

错误是：

TypeError: document.getElementById(...) 为空 document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/fall-banner.jpg')";

【问题讨论】：

getElementsByClassName 返回一个集合，你必须循环。

标签： javascript css getelementsbyclassname

【解决方案1】：

正如 elclanrs 所指出的，getElementsByClassName 不是您想要的。在我看来，您需要 getElementById。

此外，您的 javascript 在引用您尝试设置背景图像的 div 之前执行。尝试将脚本放在页面底部。

以下内容对我有用。请注意，我对文件名和图像路径进行了一些更改。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="banner-container" style="width:400px;height:300px;"></div>

<script>
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;

// Summer
if (total >= 6 && total <= 8)
{
    document.getElementById("banner-container").style.backgroundImage = "url('images/winter.png')";
}
// Autumn
else if (total >= 9 && total <= 11)
{
    document.getElementById("banner-container").style.backgroundImage="url('images/fall.png')";
}
// Winter
else if (total == 12 || total == 1 || total == 2)
{
    document.getElementById("banner-container").style.backgroundImage = "url('images/winter.png')";
}
// Spring
else if (total >= 2 && total <= 6)
{
    document.getElementById("banner-container").style.backgroundImage = "url('images/spring.png')";
}
else
{
    document.getElementById("banner-container").style.backgroundImage = "url('images/summer.png')";
}
</script>

</body> </html>

【讨论】：

我将 getElementsByClassName 的所有实例都更改为 getElementById，但仍然出现错误：TypeError: document.getElementById(...) is null document.getElementById("home-banner").style.backgroundImage = "url('images/homepage-banners/fall-banner.jpg')";
document.getElementById() 仅在那些是 id 时才有效，但我敢打赌它们是 css 类名。尝试改用document.querySelector('.banner-container')。
将其移至页面底部有效。非常感谢。