classList 객체의 add 메서드
classList 객체의
add 메서드는 요소에 CSS 클래스를 추가할 수 있게 해줍니다.
구문
element.classList.add(class);
예제
요소에 kkk 클래스를 추가해 봅시다:
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('kkk');
코드 실행 결과:
<p id="elem" class="www ggg zzz kkk"></p>
예제
요소에 이미 존재하는 zzz 클래스를 추가해 봅시다 -
아무 일도 일어나지 않을 것입니다, 중복된 클래스는 추가되지 않기 때문입니다:
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('zzz');
코드 실행 결과:
<p id="elem" class="www ggg zzz"></p>
함께 보기
-
지정된 클래스를 제거하는
classList.remove메서드 -
지정된 클래스를 확인하는
classList.contains메서드 -
지정된 클래스를 전환하는
classList.toggle메서드
