classList 객체의 add 메서드

classList 객체의 add 메서드는 요소에 CSS 클래스를 추가할 수 있게 해줍니다.

구문

javascriptelement.classList.add(class);

예제

요소에 kkk 클래스를 추가해 봅시다:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('kkk');

코드 실행 결과:

html<p id="elem" class="www ggg zzz kkk"></p>

예제

요소에 이미 존재하는 zzz 클래스를 추가해 봅시다 - 아무 일도 일어나지 않을 것입니다, 중복된 클래스는 추가되지 않기 때문입니다:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.add('zzz');

코드 실행 결과:

html<p id="elem" class="www ggg zzz"></p>

함께 보기