jQuery 입문 | CSS 스타일 및 프로퍼티 설정 | 클래스 설정 .addClass() .removeClass() .hasClass()

Tags:

클래스 설정

HTML 요소는 여러 개의 class 속성값을 가질 수 있다.
jQuery는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공한다.
제공되는 이 메소드를 통해서 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있다.

메소드 설명
.addClass() 선택된 요소에 인수로 전달받은 클래스를 추가한다.
.removeClass() 선택된 요소에서 인수로 전달받은 클래스를 제거한다.
.toggleClass() 선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다.
.hasClass() 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다.

클래스 속성 추가 .addClass()

.addClass() 메소드로 HTML 요소에 클래스 속성를 간단히 추가할 수 있다.

문법

$(selector).addClass(classname)

예제

$(function() {
    $("#btnAdd").on("click", function() {
        $("#one, #two").addClass("blue");
    });
});

클래스 속성 삭제 .removeClass()

.removeClass() 메소드로 HTML 요소의 클래스를 간단히 삭제할 수 있다.

문법

$(selector).removeClass(classname)

예제

$(function() {
    $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <style>
    .blue {
        color: blue;
    }
  </style>
  <script>
    $(function() {
      $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
      });
    });
  </script>
</head>
<body>
    <h1>.removeClass() 클래스 삭제</h1>
    <div id="one" class="blue">버튼을 누르면 클래스가  삭제된다.</div>
    <div id="two" class="blue">글자색이 검은색으로 변한다.</div>
    <button id="btnRemove">클래스 삭제</button>
</body>
</html>

클래스 속성 토글 .toggleClass()

.toggleClass() 메소드로 HTML 요소의 클래스가 추가와 제거를 번갈아 할 수 있다.

문법

$(selector).toggleClass(classname)

예제

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ko">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .toggleClass() </title>
    <script>
    $(function() {
        $("#btnToggle").on("click", function() {
          $("#one, #two").toggleClass("blue");
	      });
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>클래스 토글</h1>
    <div id="one">버튼을 누르면 클래스가 추가와 제거를 번갈아 할 수 있다.</div>
    <div id="two">글자색이 번갈아 가면서 변한다.</div>
  	<button id="btnToggle">클래스 토글</button>
</body>
</html>

클래스 포함 여부 확인 .hasClass()

. .hasClass() 메소드로 HTML 요소에 클래스가 포함되어 있는지를 확인할 수 있다.

문법

$(selector).hasClass(classname)

예제

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

<!DOCTYPE html>
<html lang="ko">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>jQuery .hasClass() </title>
    <script>
    $(function() {
        $("#btn").on("click", function() {
            var result = $("#one").hasClass("blue");
            $("#two").html(result);
		});
    });
    </script>
   <style>
    .blue {
        color: blue;
    }
    </style>
</head>
<body>
    <h1>클래스 토글</h1>
    <div id="one" class="blue">버튼을 누르면 클래스가 포함되어 있는지를 확인할 수 있다.</div>
    <div id="two"></div>
  	<button id="btn">클래스 포함 여부 확인</button>
</body>
</html>



최종 수정 : 2021-08-27