목차

jQuery addClass() Method

  • description : jQuery addClass() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-09


The source of this article

jQuery addClass() Method

Example

첫 번째 <p> 요소에 클래스 이름을 추가합니다.

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      .intro {
        font-size: 150%;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading.</h1>
 
    <p>This is a paragraph.</p>
    <!-- 버튼 클릭 시 첫 번째 p요소에 클래스가 추가되어
     <p class="intro">This is a paragraph.</p>로 변경되어, 스타일이 적용된다. -->
    <p>This is another paragraph.</p>
    <button>Add a class name to the first p element</button>
 
    <script>
      $(document).ready(function () {
        $('button').click(function () {
          $('p:first').addClass('intro');
        });
      });
    </script>
  </body>

Definition and Usage

addClass() 메서드는 선택한 요소들에 하나 이상의 클래스 이름을 추가합니다.

이 메서드는 기존 클래스 속성을 제거하지 않고, 클래스 속성에 하나 이상의 클래스 이름만 추가합니다.

Tip: 둘 이상의 클래스를 추가하려면, 공백(spaces)으로 클래스 이름을 구분하십시오.

Syntax

$(selector).addClass(classname, function(index,currentclass))


Parameter Description
classname 필수입니다. 추가될 하나 이상의 클래스 이름을 지정합니다.
function(index,currentclass) 선택입니다. 추가될 하아 이상의 클래스 이름을 반환하는 함수를 지정합니다.
index - 집합(set)에서 요소의 인덱스 위치를 반환합니다.
currentclass - 선택한 요소의 현재 클래스 이름을 반환합니다.

More Examples

Example

하나의 지정한 요소에 두 개의 클래스를 추가합니다.

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      .intro {
        font-size: 30px;
        color: blue;
      }
      .note {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
 
    <p>This is a paragraph</p>
    <!-- 버튼 클릭 시 <p class="intro note">This is a paragraph</p>처럼 p 요소에
    intro class와 note class가 적용되어 스타일이 적용된다. -->
    <p>This is another paragraph</p>
 
    <button>Add two clsss name to the first p element</button>
 
    <script>
      $(document).ready(function () {
        $('button').click(function () {
          $('p:first').addClass('intro note');
          /* 첫 번째 p 요소에 intro 클래스, note 클래스를 추가한다. */
        });
      });
    </script>
  </body>

Example

함수를 사용하여 선택한 요소에 클래스를 추가합니다.

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      .par_0 {
        color: blue;
      }
      .par_1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading.</h1>
 
    <p>This is a paragraph</p>
    <!-- 버튼 클릭 시 <p class="par_0">This is a paragraph</p>로 변경됨 -->
    <p>This is another paragraph</p>
    <!-- 버튼 클릭 시 <p class="par_1">This is another paragraph</p>로 변경됨 -->
 
    <button>Add classes to p element</button>
 
    <script>
      $(document).ready(function () {
        $('button').click(function () {
          $('p').addClass(function (n) {
            return 'par_' + n;
            /* n은 요소 p의 인텍스.  */
          });
        });
      });
    </script>
  </body>

Example

요소의 클래스 이름을 변경합니다.
addClass()와 removeClass()를 사용하여 하나의 클래스 이름을 삭제하고, 새로운 클래스 이름을 추가합니다.

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
      .intro {
        color: red;
      }
      .main {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
 
    <p>This is another paragraph</p>
    <p class="intro">This is a paragraph</p>
    <!-- 버튼 클릭 시 <p class="main">This is a paragraph</p>로 변경된다.-->
    <button>Change class name of the last p element</button>
 
    <script>
      $(document).ready(function () {
        $('button').click(function () {
          $('p:last').removeClass('intro').addClass('main');
          /* 마지막 p 태그에서 intro 클래스를 제거하고, main 클래스를 추가 */
        });
      });
    </script>
  </body>
, , ,