jquery로 background css 가져올때 주의점 (jquery get background css)

jquery에서는 .css를 이용해서 간단하게 해당 선택자의 css를 가져오거나 변경할수있다.

 

하지만 background css를 가져올때는 조금 다르게 가져와야한다. 여러가지 검색하다가 알게되어서 적어둔다..

 

일반적인 jquery get css // set css

 

// get css
var css1 = $("#selector").css("color");

// set css
$("#selector").css("color", "#f5f5f5");

 

하지만 background css경우 위와같은 형식으로 가져올경우 object형태로 불러오게된다.

 

#sample {
  height: 100vh;
  background: url(https://w.wallhaven.cc/full/dg/wallhaven-dgzj9o.jpg) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: rgb(251, 213, 767);
}

 

jquery

 

var sample1 = $("#sample").css("background");
  
var sample2 = $("#sample").css("background-image");

 

 

위의 결과이다. 

 

background-image나 background-size처럼 각각의 css를 딱 찍어서 써주면 상관없긴한데.. 혹시모를 사항을 대비해서

 

background를 jquery로 불러올때는 약간 object느낌으로 불러오는거같다.

$("#sample").css($({ "background": "url()" });

 나중에 햇갈릴때 보면서 사용하면 되겠다.