.addClass()

jQuery Reference

.addClass()는 선택한 모든 요소에 CSS 클래스 이름을 추가합니다. 기존 클래스는 유지되며, 추가한 클래스의 스타일 규칙이 있어야 화면의 모양도 바뀝니다.

문법과 적용 범위

$(".item").addClass("active");
$(".item").addClass("marked active");
$(".item").addClass(["marked", "active"]);

클래스 이름 앞에 선택자를 뜻하는 점을 붙이지 않습니다. 여러 클래스는 공백으로 구분하거나 배열로 전달할 수 있습니다. 함수 형태에서는 각 요소의 인덱스와 현재 클래스 문자열을 받아 서로 다른 클래스 이름을 반환할 수 있습니다. 반환값은 원래 jQuery 객체이므로 .addClass().attr()처럼 작업을 연결할 수 있습니다.

jQuery 공식 문서의 .addClass() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery addClass 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<p class="item base">첫 항목</p>
<p class="item base">둘째 항목</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $(".item").addClass("marked active");
      $("#output").text($(".item").first().attr("class"));
    });
  </script>
</body>
</html>

실행 결과 확인

두 문단 모두 배경·테두리와 붉은 글자색이 적용됩니다. 결과에는 item base marked active가 표시되어 기존 item, base가 남아 있는 것을 확인할 수 있습니다. 같은 클래스를 다시 추가해도 이름이 중복되지 않습니다.

항목별 클래스 이름 만들기

$(".item").addClass(function (index) {
  return "item-" + index;
});

인덱스는 0부터 시작하므로 첫 항목에는 item-0, 둘째에는 item-1이 붙습니다. 이름만 붙여서는 모양이 바뀌지 않으며, 해당 이름을 대상으로 하는 CSS가 필요합니다.

사용할 때 주의할 점

.addClass(".active")는 active 클래스를 추가하는 올바른 표현이 아닙니다. 선택할 때는 .active, 이름을 인수로 줄 때는 active를 사용하세요.
클래스가 추가됐는데 모양이 같다면 CSS 규칙의 존재와 우선순위, 기존 인라인 스타일을 확인하세요. 클래스 추가 자체가 새로운 CSS 규칙을 만드는 것은 아닙니다.
조건이 거짓일 때 이전 강조를 없애야 한다면 추가만 하는 코드로는 부족합니다. .removeClass() 또는 .toggleClass(이름, 조건)를 사용하세요.

용도를 비교하려면 .removeClass()로 특정 클래스 제거하기, .toggleClass()로 상태에 맞게 클래스 설정하기을 참고하세요.

jQuery Reference