按月更改背景圖片

我試圖根據現在的季節更改元素的背景圖片。我收到以下錯誤：與標記按月更改背景圖片

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'）」;

來源

2014-09-22 Pop23

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

來源

2014-09-22 04:36:04 HeadCode

我改變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

按月更改背景圖片

回答

相關問題