jQuery - CSS 클래스 가져오기 및 설정
jQuery를 사용하면 요소의 스타일을 쉽게 조작할 수 있습니다.
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 토글 클래스() 메서드
다음 예제에서는 jQuery toggleClass()메서드를 사용하는 방법을 보여줍니다. 이 메서드는 선택한 요소에서 클래스 추가/제거 사이를 전환합니다.
예시
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery CSS() 메서드
jQuery css()메소드는 다음 장에서 설명한다.
jQuery 연습
jQuery CSS 참조
모든 jQuery CSS 메서드에 대한 전체 개요를 보려면 jQuery HTML/CSS Reference 로 이동하십시오 .