CSS 클래스 가져오기 및 설정

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

CSS를 조작하는 jQuery

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

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

예제 스타일시트

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

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

.blue {
  color: blue;
}

jQuery addClass()

예제 1

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

예제 2

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

JQuery RemoveClass()

예제

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

jQuery toggleClass()

예제

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기