Posts
jQuery1분

[jQuery] CSS 조작

목차8

CSS 조작

jQuery에는 CSS 조작을 위한 몇 가지 방법이 있다.

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

addClass()

다른 요소에 클래스 속성을 추가한다. 물론 클래스를 추가할 때 여러 요소를 선택할 수 있다.

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

addClass()메소드 내에서 여러 클래스를 지정할 수도 있다.

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

removeClass()

다른 요소에 클래스 속성을 제거한다.

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

toggleClass()

선택한 요소에서 클래스 추가/제거 사이를 전환한다.

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

css()

css() 메소드는 선택한 요소에 대해 하나 이상의 스타일 속성을 설정하거나 반환한다.

코드
css("propertyname"); // css 속성 반환
css("propertyname","value"); // css 속성 설정
css({"propertyname":"value","propertyname":"value",...}); // 여러 css 속성 설정

CSS 속성 반환

첫 번째 일치 요소의 background-color 값을 반환받기:

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

CSS 속성 설정

일치하는 모든 요소에 대한 배경색 값을 설정하기:

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

여러 CSS 속성 설정

일치하는 모든 요소에 대해 배경색과 글꼴 크기를 설정하기:

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

반응형