제이쿼리 클래스명 추가, 변경, 삭제 방법

친효스킨2를 한창 만드는 중입니다. 사이드바 작업을 먼저 진행 중인데 사용자가 임의로 등록하는 모듈에 대해서는 별도로 스타일을 지정해줘야 합니다. 예를 들자면 티스토리에서 개인적으로 만든 배너 이미지를 사이드바에 등록 시 html의 구조는 아래처럼 들어가게 됩니다.

 

<div class="module module_plugin">
    <!-- SB_Banner - START -->
    <a href="#" target="_blank"><img src="#"></a>
    <!-- SB_Banner - END -->
</div>

 

div가 부모 요소가 되고 클래스명은 두 개가 쓰이게 되는데 각각 module과 module_plugin 입니다. 저는 여기에 제가 임의로 제작한 스타일 클래스명을 하나 더 추가를 하고 싶습니다. rgySideModule 이라고 하는 클래스명을 말입니다. 이 클래스명에는 사이드바 전용 스타일 시트가 들어있습니다. 클래스명을 별도로 추가하려면 스크립트를 써야 하고 대중적으로 많이 알려진 제이쿼리를 사용해서 클래스명을 추가해 보겠습니다. 클래스명 추가 매소드는 다음과 같습니다.

 

제이쿼리 선택자 추가

<script>
    $(document).ready(function() {
        $("선택자").addClass("클래스명");
    });
</script>

이렇게 사용하면 됩니다.

 

결과는 보시는 것처럼 별도로 추가한 커스텀 모듈의 div 요소에 원하는 클래스명이 정상적으로 추가되었음을 확인할 수 있습니다.

 

제이쿼리 선택자 삭제

이번에는 반대로 원하는 클래스명을 요소에서 제거하는 방법입니다.

 

<script>
    $(document).ready(function() {
        $("선택자").removeClass("클래스명");
    });
</script>

추가는 addClass이며 삭제는 removeClass입니다. 나머지 사용 방법은 동일합니다.

 

제이쿼리 선택자 변경

마지막으로 클래스명을 변경하는 방법에 대해 알아보겠습니다. 형태는 다음과 같습니다.

 

<script>
    $(document).ready(function() {
        $("선택자").attr("class", "변경할 클래스명");
    });
</script>

매소드는 attr이라는것을 사용한다는 걸 알 수 있습니다. 그럼 바로 실전에서 확인해 보겠습니다.

 

"「안녕하세요」라는 텍스트는 h1 태그가 감싸고 있습니다. 그리고 h1 요소에는 test라는 클래스명이 부여되어 있습니다. 여기에서 test 클래스명을 post로 변경할 것입니다. 그러면 CSS에 등록되어있는 post 스타일 속성에 따라 글씨색이 빨간색으로 바뀌게 될 겁니다. 그 결과가 위에 예시로 잘 나타나 있습니다. 제이쿼리를 사용하여 클래스명을 자유 자재로 편집해 보시기 바랍니다. 끝.