jQuery class 클래스 속성 설정 및 클래스 메서드

---

클래스 설정

• HTML 요소의 class 속성은 여러 개의 class 값을 가짐
• class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 가능

클래스 설정관련 메서드 설명

• .addClass() : 선택한 요소에 인수로 전달받은 클래스를 추가함.
• .removeClass() : 선택한 요소에서 인수로 전달받은 클래스를 제거함.
• .toggleClass() : 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
• .hasClass() : 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함.
  

  $(function() {
  
      $("#addBtn").on("click", function() {
  
          // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함.
  
          $("#first, #third").addClass("lined");
  
      });
  
      $("#removeBtn").on("click", function() {
  
          // id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함.
  
          $("#first, #third").removeClass("lined");
  
      });
  
  });​

• 단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것!
• 또한, .toggleClass() 메서드를 이용하여 클래스의 추가와 제거를 번갈아 시행도 가능
• 다음 예제는 .toggleClass() 메서드를 이용하여 위의 예제를 더욱 간결하게 만든 예제

$(function() {

    $("button").on("click", function() {

        // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.

        $("#first, #third").toggleClass("lined");

    });

});

$(function() {

    $("button").on("click", function() {

        // id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.

        var result = $("#target").hasClass("lined");

        $("#text").html(result);

    });

});​

Reference

https://www.tcpschool.com/jquery/jq_style_class

코딩교육 티씨피스쿨