[JavaScript] 클래스 제어방법 비교 - jQuery vs JavaScript

jQuery와 JavaScript를 이용해서 클래스를 제어하는 방법을 비교해보자. 

 

 

<jQuery로 클래스 제어하기>

1. 클래스 추가

$('#element').addClass('class1'); // 1개 추가 
$('#element').addClass('class1 class2'); // 여러개 추가

2. 클래스 제거

$('#element').removeClass('class1'); // 1개 제거
$('#element').removeClass('class1 class2'); // 여러개 제거

3. 클래스 교체: 기존 클래스 제거 후 새로운 클래스 추가

$().switchClass('oldClass', 'newClass');
$('#element').removeClass('oldClass').add('newClass')

4. 클래스 새로 지정

$('#element').attr('class', 'newClass');

5. 클래스 존재여부 확인 (반환값: boolean)

$('#element').hasClass('class1'); 
$('#element').hasClass('class1 class2'); // 여러개: 한 개라도 일치하지 않으면 false 반환

6. 클래스 토글 

 - 첫번째 인자 (필수): 클래스 이름

- 두번째 인자 (필수x): true면 클래스 추가, false면 클래스 제거  

$('#element').toggleClass('class1');
$('#element').toggleClass('class1', true);
$('#element').toggleClass('class1', false);

 

 

<JavaScript로 클래스 제어하기>

const element = document.getElementById('element');

1. 클래스 추가 

 - jQuery와 다르게 클래스 사이에 ,가 들어감 

element.classList.add('class1'); // 1개 추가 
element.classList.add('class1', 'class2') // 여러개 추가

2. 클래스 제거

 - jQuery와 다르게 클래스 사이에 ,가 들어감 

element.classList.remove('class1'); // 1개 제거
element.classList.remove('class1', 'class2') // 여러개 제거

3. 클래스 교체

element.classList.replace('oldClass', 'newClass');

4. 클래스 존재여부 확인 (반환값: boolean)

element.classList.contains('class1'); 
element.classList.contains('class1', 'class2'); // 여러개: 한 개라도 일치하지 않으면 false 반환

5. 클래스 토글

element.classList.toggle('class1');
element.classList.toggle('class1', true);
element.classList.toggle('class1', false);

 

예시) 

See the Pen Class Control by Sujin Lee (@sujinlee_910616) on CodePen.