jQuery CSS 클래스 가져오기 및 설정

jQuery를 통해 CSS 요소를 쉽게操作할 수 있습니다.

jQuery CSS 작업

jQuery는 CSS 작업을 수행하는 여러 메서드를 가지고 있습니다. 아래의 메서드들을 배웁니다:

  • addClass() - 선택된 요소에 대해 하나 이상의 클래스 추가
  • removeClass() - 선택된 요소에서 하나 이상의 클래스 제거
  • toggleClass() - 선택된 요소에 대해 클래스 추가/삭제 전환 작업
  • css() - 스타일 속성 설정 또는 반환

예제 스타일 시트

아래의 스타일 시트는 이 페이지의 모든 예제에 사용됩니다:

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

jQuery addClass() 메서드

다음 예제는 다른 요소에 대해 클래스 속성을 추가하는 방법을 보여줍니다.当然, 클래스를 추가할 때도 여러 요소를 선택할 수 있습니다:

예제

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

직접 시도해 보세요

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

예제

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

직접 시도해 보세요

jQuery removeClass() 메서드

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

예제

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

직접 시도해 보세요

jQuery toggleClass() 메서드

아래의 예제는 jQuery toggleClass() 메서드를 사용하는 방법을 보여줍니다. 이 메서드는 선택된 요소에 대해 클래스를 추가/삭제하는 전환 작업을 수행합니다:

예제

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

직접 시도해 보세요

jQuery css() 메서드

다음 장에서 jQuery css() 메서드를 설명하겠습니다.

jQuery HTML 참조 매뉴얼

jQuery CSS 메서드의 전체 내용에 대해 알고 싶다면, 우리의 jQuery CSS 작업 참조 매뉴얼