classList 토글

Coddy의 JavaScript DOM 메서드 코스 레슨 — 13개 중 13번째.

JavaScript의 classList.toggle(class) 메서드는 요소에서 클래스를 추가하거나 제거하는 스위치처럼 작동합니다. 예를 들어:

const element = document.getElementById("container");
element.classList.toggle("fluid-container");

위의 classList.toggle() 메서드는 container ID를 가진 요소에 fluid-container 클래스를 토글합니다.

챌린지

쉬움

토글 버튼과 ID가 있는 div, 그리고 각각의 스타일이 포함된 HTML 및 CSS 코드가 제공됩니다.

JavaScript만 사용하여, 버튼 클릭 시 content에 dark-mode 클래스를 토글하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <button id="toggleButton">Toggle Dark Mode</button>
        <div id="content">This is some content. Click the button to toggle dark mode.</div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM 메서드의 모든 레슨

1소개

소개 Document Object Model

2DOM 메서드 I

getElementById 요소 스타일 수정하기 getElementsByClassName 반복문을 통한 순회 및 조작 getElementsByTagName querySelector

3DOM 메서드 II

querySelectorAll addEventListener innerHTML createElement 및 appendChildclassList 토글