jQuery - Get and Set CSS Classes

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");
});

$("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");
});

 

 

jQuery - css() 메서드

CSS 속성 반환

css("propertyname");

$("p").css("background-color");

 

 

CSS 속성 설정

css("propertyname","value");

$("p").css("background-color", "yellow");

 

여러 CSS 속성 설정

css({"propertyname":"value","propertyname":"value",...});

$("p").css({"background-color": "yellow", "font-size": "200%"});