p 태그에 적용된 class 속성값인 red-color, fz20이 삭제되어 기본 스타일로 돌아갑니다.
마지막으로 toggle() 메서드는 add() 메서드와 remove() 메서드를 반복해서 호출합니다.
12/03/classList_toggle.html
<p id="text">text</p>
<script>
const pEl = document.querySelector("#text"); // 노드 선택
// 1초마다 toggle() 메서드 반복 실행
setInterval(function(){
pEl.classList.toggle("red-color");
}, 1000);
</script>
코드를 실행해 보면 텍스트 색상이 1초마다 빨간색과 검은색으로 바뀝니다.
TIP | setInterval() 메서드는 표 11-6에서 소개한 window 객체의 메서드입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/setInterval 페이지에서 확인해 보세요.