클래스 설정

HTML 요소는 여러 개의 class 속성값을 가질 수 있다.
jQuery는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공한다.
제공되는 이 메소드를 통해서 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있다.

메소드설명
.addClass()선택된 요소에 인수로 전달받은 클래스를 추가한다.
.removeClass()선택된 요소에서 인수로 전달받은 클래스를 제거한다.
.toggleClass()선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다.
.hasClass()인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다.

클래스 속성 추가 .addClass()

.addClass() 메소드로 HTML 요소에 클래스 속성를 간단히 추가할 수 있다.

문법

$(selector).addClass(classname)

예제

$(function() {
    $("#btnAdd").on("click", function() {
        $("#one, #two").addClass("blue");
    });
});

클래스 속성 삭제 .removeClass()

.removeClass() 메소드로 HTML 요소의 클래스를 간단히 삭제할 수 있다.

문법

$(selector).removeClass(classname)

예제

$(function() {
    $("#btnRemove").on("click", function() {
        $("#one, #two").removeClass("blue");
    });
});

코드 실행

클래스 속성 토글 .toggleClass()

.toggleClass() 메소드로 HTML 요소의 클래스가 추가와 제거를 번갈아 할 수 있다.

문법

$(selector).toggleClass(classname)

예제

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

코드 실행

클래스 포함 여부 확인 .hasClass()

. .hasClass() 메소드로 HTML 요소에 클래스가 포함되어 있는지를 확인할 수 있다.

문법

$(selector).hasClass(classname)

예제

$(function() {
    $("#btnToggle").on("click", function() {
        $("#one, #two").toggleClass("blue");
    });
});

코드 실행

+ Recent posts