[Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList)

[Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList)

 

 

 

jQuery class 제어 소스

 

$('#ele').addClass('on');
$('#ele').addClass('on normal');
$('#ele').removeClass('on');
$('#ele').removeClass('on normal');
$('#ele').hasClass('on');
$('#ele').hasClass('on normal');
$('#ele').toggleClass('on');

 

 

javascript class 제어 소스

 

var ele = document.getElementById('ele');

ele.classList.add('on');
ele.classList.add('on', 'normal');
ele.classList.remove('on');
ele.classList.remove('on', 'normal');
ele.classList.contains('on');
ele.classList.contains('on', 'normal');
ele.classList.toggle('on');
ele.classList.toggle('on', false);

 

- classList의 toggle 함수는 토글링할 class 이름과 boolean 타입의 인자 두 개를 받을 수 있다.

 

boolean 타입의 인자를 true로 설정하면 강제로 class를 추가하고, false로 설정하면 강제로 class를 삭제한다.

 

 

브라우저 호환성은 반드시 체크해주자 !  > 호환성 보기