[JQuery] 제이쿼리 메서드(class control)

Class control 메서드 종류

• addClass -> 클래스 넣기
• removeClass -> 클래스 지우기
• toggleClass -> 넣고 빼기

    <h1 class="button">button</h1>
    <div class="box"></div>

 

$('.button').click(function(){
    $('.box').toggleClass('testActive');
})

 

.box{
    background-color: red;
    width: 100px;
    height: 100px;
}

.testActive {
    background-color: blue;
}

01

결과

처음에는 이전과 같은 결과로 빨간색 박스가 생성이 되어있다. 하지만 버튼을 누르면 파란색으로 변경되는 것을 확인할 수 있었다.

 

자바스크리트를 확인해 본 결과 버튼을 클릭했을 때, box 태그에 testActive css가 추가된 것을 확인할 수 있었다.