hoon's bLog

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

IT/HTML, jQuery, Ajax

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

개발한기발자 2023. 7. 13. 13:18
반응형


클래스 설정

  • 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

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com



728x90
반응형