classList toggle

Leçon 13 sur 13 du cours Méthodes DOM en JavaScript de Coddy.

La méthode classList.toggle(class) en JavaScript agit comme un interrupteur pour ajouter ou supprimer une classe d'un élément. Par exemple :

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

La méthode classList.toggle() ci-dessus bascule la classe fluid-container sur l'élément avec l'ID container.

Défi

Facile

On vous donne du code HTML & CSS qui contient un bouton de bascule et une div avec un ID & les styles respectifs.

En utilisant uniquement JavaScript, basculez la classe dark-mode sur le contenu lors d'un clic sur le bouton

Essayez vous-même

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

Toutes les leçons de Méthodes DOM en JavaScript

1Introduction

Introduction Document Object Model

2Méthodes du DOM I

getElementById Modifier le style d'un élément getElementsByClassName Parcourir et manipuler getElementsByTagName querySelector

3Méthodes du DOM II

querySelectorAll addEventListener innerHTML createElement et appendChildclassList toggle