[JQuery] 객체의 Class를 변경해보자

#제이쿼리 #자바스크립트 #CSS변경 #클래스변경 #removeClass #addClass

안녕하세요, 배곧동개발자 입니다.

간단하지만 많이쓰이는! 제이쿼리를 통한 클래스 변경을 알아볼까해요. 웹페이지에서 형태, 틀을 지정해줄때 쓰는게 클래스라는건데 쉽게말하면 옷이라고 보면 되요.

이거를 변경해줌으로써 권한에 따라 버튼이 보이고 안보이고, 색이 바뀌고 안바뀌고, 광고 변경, 모바일버전으로 변경등이 간단히 이루어져요.

일단 클래스를 만들어줍니다.

<style type="text/css">
 .bgDev1{
  background-color: red;
  width: 100px;
  height: 100px;
  cursor: pointer;
 }
 
 .bgDev2{
  background-color: black;
  width: 200px;
  height: 200px;
  cursor: wait;
 }
</style>

bgDev1 이라는 클래스는 크키가 100px씩인 정사각형의 빨간색 네모이며 마우스는 손모양이네요.

bgDev2 이라는 클래스는 크키가 200px씩인 정사각형의 검정색 네모이며 마우스는 로딩중모양이네요.

$(document).ready(function(){
 $("#bgDev").on("click",function(){
  // bgDev 대한 클래스를 bgDev1에서 bgDev2로 변경
  $("#bgDev").removeClass("bgDev1").addClass("bgDev2");
 });
});

이러한 자바스크립트를 만들어서 bgDev를 클릭했을 때 removeClass를 통해서 기존 클래스를 삭제하고 addClass를 통해서 새로운 클래스를 입혀줍니다.

즉, 클래스 변경 방법은 remove -> add 인거지요! 기존 클래스는 bgDev1이였는데, 클릭함으로써 이렇게 변경이 되어버리는거죠.

개념자체는 어렵지 않기때문에 금방 아실수 있을거에요. 응용하는건 본인 몫!

이만, 배곧동개발자 였습니다.