background-image를 javascript, jquery를 사용하여 동적으로 바꿔주기

background image를 js, jquery 사용하여 동적으로 바꿔주고 싶을 때

나는 jquery가 편해서 jquery를 씀

 

예시)

var url = "https://cdn.pixabay.com/photo/2022/08/14/13/42/flower-7385943_960_720.jpg";
 
 
//javascript
var ele = document.getElementByClassName("container");
ele.style.backgroundImage = `url(${url})`;

//jquery
$(".container").css({"background-image":`url(${url})`});

 

 

최종코드)

function changeImg(){
    var type = getParameterByName("fclt_type2");
    var url = "../css/images/bg/"+type+".jpg";
   
    $(".container").css({"background-image":`url(${url})`});
}

던져주는 parameter인 해당 시설의 타입을 가져와 배경의 사진을 바꿔줬어야 했기떄문에 위와 같은 코드를 사용함

db에 시설별 사진 path를 저장해놓고 그걸 불러오면 더 확장성있겠지만 시간이 없어서 이만..