최신 웹 개발 튜토리얼
 

jQuery - 가져 오기 및 CSS 클래스를 설정

❮ 이전 다음 장 ❯

jQuery로, 그 요소의 CSS를 조작하기 쉽다.


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를 toggleClass() 메소드

다음은 jQuery를 사용하는 방법을 보여줍니다 toggleClass() 메소드를. 이 방법은 선택한 요소에서 클래스를 추가 / 제거 사이를 전환합니다 :

예

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
»그것을 자신을 시도

의 jQuery css() 메소드

JQuery와 css() 메소드는 다음 장에서 설명한다.

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4»

jQuery를 CSS 참조

모든 jQuery를 CSS 방법의 전체 개요는, 우리로 이동하시기 바랍니다 jQuery를 HTML / CSS 참조 .


❮ 이전 다음 장 ❯