jQuery CSS 작업

jQuery의 매우 중요한 부분은 DOM을 조작할 수 있는 가능성입니다.

jQuery는 요소 스타일을 효과적으로 조작하는 메서드를 제공합니다.

이 장에서는 DOM에 CSS 클래스를 추가하거나 제거하는 방법을 설명합니다.

jQuery CSS 조작

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

CSS 작업을 위해 다음과 같은 jQuery 메서드가 있습니다:

• addClass()

• removeClass()

• toggleClass()

• css()

각 메서드의 사용법을 보여드리겠습니다.

jQuery addClass() 메서드

jQuery addClass()메서드는 하나나 여러 개의 클래스 이름을 선택된 요소에 추가합니다.

아래의 예제는 첫 번째 <p> 요소에 클래스 이름을 추가합니다:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

한 번에 여러 개의 클래스(공백으로 구분)를 선택된 요소에 추가할 수 있습니다. 예를 들어:

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

jQuery removeClass() 메서드

jQuery removeClass()메서드는 선택된 요소에서 하나나 여러 개의 클래스 이름을 제거합니다.

아래의 예제는 모든 <p> 요소에서 하나의 클래스 이름을 제거합니다:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

한 번에 선택된 요소 집합에서 하나 이상의 클래스(공백으로 구분)를 제거할 수 있습니다. 예를 들어:

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

파라미터에 클래스 이름이 지정되지 않았다면 모든 클래스를 제거합니다

$("button").click(function(){
　　$("p").removeClass();
});

jQuery toggleClass() 메서드

jQuery toggleClass()메서드는 추가/선택된 요소에서 하나나 여러 가지 클래스 이름을 제거하는 것을 전환합니다.

아래의 예제는 모든 <p> 요소에 대해 'anotherClass' 클래스 이름을 추가하고 제거하는 것을 전환합니다:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

이 메서드는 각 요소의 지정된 클래스 이름을 확인합니다:

• 클래스 이름이 누락되어 있다면 추가합니다

• 이미 클래스 이름이 설정되어 있다면 그것을 제거합니다

jQuery css() 메서드

jQuery css()메서드는 선택된 요소의 하나나 여러 가지 스타일 속성을 가져오거나 설정합니다。

jQuery css()메서드는 다음 장에서 설명됩니다。

jQuery CSS 참조

완전한 CSS 메서드에 대한 참조를 위해 우리의jQuery HTML / CSS 참조。