-
클래스 다루기프로그래밍/JQuery 2022. 11. 2. 20:41728x90
제이쿼리를 활용하여 클래스를 추가하거나 제거하는 방법에 대해 알아보자
종류 설명 addClass(‘클래스명’) 클래스를 추가 removeClass(‘클래스명’) 클래스를 제거 toggleClass(‘클래스명’) 클래스가 없으면 인수로 전달받은 클래스가 추가되고, 있으면 제거 hasClass(‘클래스명’) 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지 확인
일치하는 경우 true 반환<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>클래스의 설정</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" /> <style> .container{ width: 400px; height: 400px; border: 2px solid red; box-sizing: border-box; padding-top: 80px; } .innerbox{ margin: 0 auto; width: 200px; height: 200px; border: 5px solid gold; } .on{ /* 추가되고 제거될 class */ background-color: deepskyblue; } </style> <script> $(function(){ $('.add').on('click',function(){ // add 버튼을 클릭시 $('.innerbox').addClass('on'); // on 클래스를 추가한다. }) $('.remove').on('click',function(){ // remove 버튼을 클릭시 $('.innerbox').removeClass('on'); // on 클래스를 제거한다. }) $('.toggle').on('click',function(){ // toggle 버튼을 클릭시 $('.innerbox').toggleClass('on'); // on 클래스가 있으면 제거하고 없으면 추가한다. }) }); </script> </head> <body> <div class="container"> <div class="innerbox"> </div> </div> <input type="button" value="클래스 추가" class="add"> <input type="button" value="클래스 제거" class="remove"> <input type="button" value="토글클래스" class="toggle"> </body> </html>
기본 결과 화면 
addClass() 이벤트 실행 결과 화면 removeClass() 이벤트 실행 결과 화면 toggleClass() 이벤트 실행 결과 화면 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
이벤트 바인딩 (0) 2022.11.05 이벤트(event) 종류 (0) 2022.11.04 박스모델 메소드 (0) 2022.11.01 자식, 자손 요소의 탐색 (0) 2022.10.31 형제요소 탐색 (0) 2022.10.30