[jQuery] class

동적으로 css 스타일 적용하는 것은 결국 class를 추가/제거하는 형태로 구현한다

jquery는 이를 간단히 구현하는 함수들을 제공한다

스타일을 미리 세팅해놓고 클래스를 넣었다 뺐다 한다

 

addClass()

removeClass()

toggleClass()

 

<style>
.important {
    font-weight: bold;
    font-size: xx-large;
}

h1, h2, p, div {
	transition: back-ground 1s;
}

.blue {
    background-color: cyan;
}
</style>

<script>

$(document).ready(function(){
    $("#btn01").click(function(){
       $("h1, h2, p").addClass("blue") //블루 클래스가 적용된다
       $("div#d01").addClass('important');
       $("div#d02").addClass('important blue');
	});
    $("#btn02").click(function(){
        $("h1, h2, p").removeClass("blue");
    });
    $("#btn03").click(function(){
        $("h1, h2, p").toggleClass("blue");
        $("div#d01").toggleClass("important");
    });
});
</script>