jQuery - Get and Set CSS Classes

jQuery를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다.

jQuery에는 CSS 조작을 위한 여러 가지 방법이 있습니다. 다음 방법을 살펴 보겠습니다:

• addClass() - 선택한 요소에 하나 이상의 클래스를 추가합니다.
• removeClass() - 선택한 요소에서 하나 이상의 클래스를 제거합니다.
• toggleClass() - 선택한 요소에서 클래스 추가/제거 사이에서 토글합니다.
• css() - 스타일 속성을 설정하거나 반환합니다.

이 페이지의 모든 예제에는 다음 스타일 시트가 사용됩니다.

.important {
  font-weight: bold;
  font-size: xx-large;
}
 
.blue {
  color: blue;
} 

다음 예제는 다른 요소에 클래스 속성을 추가하는 방법을 보여줍니다.
물론 클래스를 추가할 때 여러 요소를 선택할 수 있습니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
      });
    });

addClass() 메서드 내에서 여러 클래스를 지정할 수도 있습니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").addClass("important blue");
      });
    });

다음 예제는 다른 요소에서 특정 클래스 속성을 제거하는 방법을 보여줍니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").removeClass("blue");
      });
    });

다음 예제는 jQuery toggleClass() 메서드를 사용하는 방법을 보여줍니다.
이 메서드는 선택한 요소에서 클래스 추가/제거 사이에서 토글합니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("h1, h2, p").toggleClass("blue");
      });
    });

jQuery css() 메서드는 다음 장에서 설명합니다.

모든 jQuery HTML 메서드에 대한 전체 개요를 보려면, jQuery HTML/CSS Reference로 이동하십시오.