attr('class'), addClass, removeClass, toggleClass, hasClass - 적용된 클래스 조회, 클래스 추가, 클래스 삭제, 클래스 확인

attr('class')

적용된 클래스 조회 

 

addClass

클래스 추가

 

removeClass

클래스 삭제

 

toggleClass

클래스 추가/삭제 반복

 

hasClass

클래스 확인

 

 

    <script>
        $(function(){
            console.log($('p').attr('class')); //size underline
        });
    </script>
    <style>
        .bold{
            font-weight: bold;
        }
        .size{
            font-size: 20px;
        }
        .underline{
            text-decoration: underline;
        }
    </style>


    <p class="size underline">내용</p>

class 3개를 지정해두고 p 태그에 size, underline 두가지 클래스를 적용하였다.

p태그가 가지고있는 class를 확인하기 위해 attr으로 class 속성을 지정한다.

현재 가지고 있는 size, underline 클래스가 확인된다.

 

 

 

 

            $('p').addClass('bold');
            $('p').addClass('bold');
            console.log($('p').attr('class')); //size underline bold

addClass으로 p태그에 bold 클래스를 추가했다. 여러번 추가한다고 해서 중복 추가가 되지는 않는다.

 

 

 

 

 

            $('p').removeClass('underline');

선택한 p 태그의 클래스 중에 underline을 삭제한다.

 

 

 

            $('p').toggleClass('underline'); //추가
            $('p').toggleClass('underline'); //제거

toggleClass는 실행할 때 마다 클래스가 없을 때는 추가하고, 있을 때는 제거하는 메서드이다.

 

 

 

 

            console.log($('p').hasClass('bold')); //true
            console.log($('p').hasClass('underline')); //false

hasClass로 해당 클래스가 존재하는지 확인한다. true / false 둘 중 하나가 리턴된다.