월 단위로 배경 이미지 변경

계절 요소에 따라 요소의 배경 이미지를 변경하려고합니다. 에서 getElementById로 전환, 마크 업월 단위로 배경 이미지 변경

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

업데이트 스크립트 : 나는 다음과 같은 오류를 받고 있어요

<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를을 (...)가 null입니다. document.getElementById ("home-banner"). style.backgroun dImage = "url ('images/homepage-banners/fall-banner.jpg')";

출처

2014-09-22 Pop23

'getElementsByClassName'은 (는) 컬렉션을 반환합니다. 루프해야합니다. – elclanrs

elclanrs에서 언급했듯이 getElementsByClassName은 사용자가 원하는 것이 아닙니다. getElementById를 원하는 것처럼 보입니다.

또한 배경 이미지를 설정하려고하는 div에 대한 참조가 있기 전에 javascript가 실행 중입니다. 스크립트를 페이지 하단에 놓으십시오.

다음은 저에게 효과적입니다. 파일 이름과 이미지 경로를 약간 변경했습니다.

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

나는에서 getElementById에 getElementsByClassName의 모든 인스턴스를 변경하고 난 여전히 오류 얻을 : (document.getElementById를 (...)이 ("가정 배너") 널 (null) document.getElementById를하다 style.backgroundImage = "URL : 을 형식 오류. 'images/homepage-banners/fall-banner.jpg') "; – Pop23

HTML 마크 업을 넣으시겠습니까? – sadrzadehsina

'document.getElementById()'는 ID 일 경우에만 작동하지만 CSS 클래스 이름으로 도박 할 것입니다. 'document.querySelector ('. 배너 컨테이너')'를 대신 사용해보십시오. – bmceldowney

답변

관련 문제