1 분 소요

제이쿼리는 HTML 요소의 class 속성을 동적으로 조작할 수 있는 메소드를 제공합니다. 특정 요소에 CSS 클래스를 추가하거나 제거하고, 조건에 따라 스타일을 전환하거나 존재 여부를 검사할 수 있습니다.

주요 클래스 관련 메소드

  • .addClass(): 클래스를 추가합니다.
  • .removeClass(): 클래스를 제거합니다.
  • .toggleClass(): 클래스가 있으면 제거, 없으면 추가합니다.
  • .hasClass(): 해당 클래스가 있는지 여부를 확인합니다.

메소드별 사용 예제

1. .addClass() – 클래스 추가

$("#addBtn").on("click", function() {
    $("#first, #third").addClass("lined");
});
  • 여러 요소에 동시에 클래스 추가 가능
  • 공백으로 구분해 여러 클래스도 추가 가능

2. .removeClass() – 클래스 제거

$("#removeBtn").on("click", function() {
    $("#first, #third").removeClass("lined");
});
  • 존재하지 않는 클래스는 무시됨
  • 공백으로 여러 클래스 제거 가능

3. .toggleClass() – 클래스 토글

$("button").on("click", function() {
    $("#first, #third").toggleClass("lined");
});
  • 주로 버튼 클릭 시 스타일 전환 효과에 유용
  • 내부적으로 hasClass()와 add/removeClass()를 조합한 동작

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

$("button").on("click", function() {
    const hasClass = $("#target").hasClass("lined");
    $("#text").html(hasClass ? "클래스가 있습니다." : "클래스가 없습니다.");
});
  • 조건문과 함께 사용하면 유용한 동적 처리 가능

클래스 메소드 활용 예제

$("button").on("click", function() {
    $("#box").addClass("highlight").removeClass("dim");
    $("#box").toggleClass("active");

    const hasActive = $("#box").hasClass("active");
    $("#status").html(hasActive ? "Active 클래스가 적용되었습니다." : "Active 클래스가 제거되었습니다.");
});

여러 클래스를 한 번에 다루기

클래스 여러 개 추가

$("#addMultiple").on("click", function() {
    $("#example").addClass("class1 class2 class3");
});

클래스 여러 개 제거

$("#removeMultiple").on("click", function() {
    $("#example").removeClass("class1 class2");
});
  • 문자열로 공백 구분만 해주면 OK
  • 순서는 중요하지 않으며, 존재하지 않는 클래스는 무시됨

활용 팁

  • .addClass()와 .removeClass()는 이벤트에 따른 스타일 제어에 적합합니다.
  • .toggleClass()는 상태 전환에 이상적이며 UI 인터랙션 처리에 자주 사용됩니다.
  • .hasClass()는 현재 상태를 기준으로 조건 분기 처리를 할 때 유용합니다.
  • 다중 클래스를 조작할 때는 공백으로 연결된 문자열을 전달하면 됩니다.

질문 정리

여러 클래스를 동시에 추가하려면 어떻게 하나요?

공백으로 구분된 문자열을 .addClass("one two three")처럼 전달하면 됩니다.

토글 시 클래스를 강제로 추가하거나 제거할 수 있나요?

.toggleClass("className", true) 또는 .toggleClass("className", false)처럼 두 번째 인자에 불리언 값을 전달하면 강제 설정할 수 있습니다.

클래스 조작과 스타일 조작 .css() 중 무엇이 더 좋은가요?

클래스 조작은 재사용성과 유지보수에 좋고, .css()는 동적 계산이 필요할 때 유용합니다.

.hasClass()는 여러 클래스 중 하나만 있어도 true인가요?

아니요, .hasClass()는 단일 클래스 문자열만 검사합니다. 여러 클래스를 검사하려면 반복문을 써야 합니다.

카테고리:

업데이트:

댓글남기기

참고