Question

我试图根据它的季节来改变元素的背景图像。我收到以下错误：

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（...）为null document.getElementById（＆＃34; home-banner＆＃34;）。style.backgroundImage =＆＃34; url（＆＃39; images / homepage-banners / fall-banner.jpg＆＃39;）＆＃34 ;;

Answer 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>

按月更改背景图像

1 个答案: