JQuery day12

클래스 설정

클래스 설정

제이쿼리를 활용하여 클래스를 추가하거나 제거하는 방법에 대해 알아보자

종류	설명
addClass(‘클래스명’)	클래스를 추가
removeClass(‘클래스명’)	클래스를 제거
toggleClass(‘클래스명’)	클래스가 없으면 인수로 전달받은 클래스가 추가되고, 있으면 제거
hasClass(‘클래스명’)	인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지 확인 일치하는 경우 true 반환

예제

<div class="container">
    <div class="innerbox">
    </div>
</div>
<input type="button" value="클래스 추가" class="add">
<input type="button" value="클래스 제거" class="remove">
<input type="button" value="토글클래스" class="toggle">

.container{
    width: 400px;
    height: 400px;
    border: 2px solid red;
    box-sizing: border-box;
    padding-top: 80px;
}
.innerbox{
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border: 5px solid gold;
}
.on{ /* 추가되고 제거될 class */
    background-color: deepskyblue;
}

이렇게 기본적인 html, css를 구성하고 jquery의 구성은 아래와 같다.

$(function(){
    $('.add').on('click',function(){   // add 버튼을 클릭시
        $('.innerbox').addClass('on'); // on 클래스를 추가한다.
    })
    $('.remove').on('click',function(){   // remove 버튼을 클릭시
        $('.innerbox').removeClass('on'); // on 클래스를 제거한다.
    })
    $('.toggle').on('click',function(){    // toggle 버튼을 클릭시
        $('.innerbox').toggleClass('on');  // on 클래스가 있으면 제거하고 없으면 추가한다.
    })
});

add 버튼을 클릭시)

remove 버튼을 클릭시)

toggle 버튼을 클릭시)


클릭시 계속 반복한다. toggleClass는 반복적인 순환 동작으로 수행해야할 경우 많이 사용된다.