按月更改背景图片

问题描述：

我试图根据现在的季节更改元素的背景图片。我收到以下错误：与标记按月更改背景图片

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')"; 
}

错误是：

类型错误：的document.getElementById （...）为空 document.getElementById（“home-banner”）。style.backgroun dImage =“url（'images/homepage-banners/fall-banner.jpg'）”;

'getElementsByClassName'返回一个集合，你必须循环。 – elclanrs 2014-09-22 04:26:24

答

正如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，我仍然得到一个错误：类型错误：的document.getElementById（...）为空的document.getElementById（“家横幅”）style.backgroundImage =“网址（ '图像/主页-横幅/下降-banner.jpg'）“; – Pop23 2014-09-22 04:46:04

你能否把你的html标记呢？ – sadrzadehsina 2014-09-22 04:50:47

'document.getElementById（）'只有在那些是ids时才会起作用，但我敢打赌他们是css类名。尝试使用'document.querySelector（'。banner-container'）'代替。 – bmceldowney 2014-09-22 05:10:56

按月更改背景图片

相关推荐