JavaScript에서 hasClass() 기능 사용하기

jQuery에서 간단하게 사용하던 hasClass

if (!$('#list').hasClass('blue')) return;

 

클래스가 있는지 없는지 판별하는 기능을 JavaScript에서는 어떻게 쓰면 될까?

classList.contains();

contains() 메서드를 사용하면 된다.

if (!document.querySelector('#list').classList.contains('blue')) return;

 

아래 예시를 확인해 보자

#list의 li태그의 색상을 red로 변경하는데 blue라는 클래스를 가지고 있는 li만 blue로 색상을 변경한다.

 

 

See the Pen classList.contains by kim oya (@ttuttu) on CodePen.