[JS] 자바스크립트 클래스 추가/삭제

목표

• JS 클래스 추가/삭제를 알아야하는 이유
• JS 클래스 추가/삭제 하는 방법

JS 클래스 추가/삭제를 알아야하는 이유

• 실무에서는 UI 개발자가 UI를 class 형식으로 전달하여 사용하기 때문
• 특정 상황에 class를 추가, 삭제하여 UI를 변경 해야하기 때문

JS 클래스 추가 - 클래스 추가시에 사용 

// 클래스 추가 
div.classList.add('good', 'love');

JS 클래스 삭제 - 클래스 삭제시에 사용

// 클래스 삭제
div.classList.remove('love');

JS 클래스 덮어쓰기 - 기존에 있는 클래스를 다지우고 새로 등록시에 사용

// 클래스 덮어쓰기
div.className = 'good';

JS 특정 클래스 변경 - on/off로 클래스 변경시에 많이사용 

// 새로운 클래스로 변경
div.classList.replace('good', 'bad'); // <div class="bad"></div>

JS 특정 클래스명 확인 - 특정 클래스 포함 여부 확인시 사용

// 클래스 포함 여부 체크
div.classList.contain('good'); // true

정리

• JS에서 클래스명을 변경하는 방법에 대해 알아보았다.
• 특정 상황에 맞게 내장함수를 잘 활용하도록 하자
• classList - replace(변경), cotain(포함여부), add(추가), remove(삭제), className(덮어쓰기)

참조

https://developer.mozilla.org/ko/docs/Web/API/Element/classList