classList toggle

Lesson 13 of 13 in Coddy's JavaScript DOM Methods course.

The classList.toggle(class) method in JavaScript acts like a switch for adding or removing a class from an element. For example :

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

The above classList.toggle() method toggles the fluid-container class to the element with container ID.

Challenge

Easy

You are given HTML & CSS code that contains toggle button and div with ID & respective stylings.

Using JavaScript only, toggle the dark-mode class to the content on a button click

Try it yourself

<!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>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListener innerHTML createElement and appendChildclassList toggle