classList toggle

Lección 13 de 13 del curso Métodos del DOM de JavaScript de Coddy.

El método classList.toggle(class) en JavaScript actúa como un interruptor para añadir o eliminar una clase de un elemento. Por ejemplo:

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

El anterior método classList.toggle() alterna la clase fluid-container en el elemento con el ID container.

Desafío

Fácil

Se te proporciona código HTML y CSS que contiene un botón de alternancia y un div con ID y sus respectivos estilos.

Usando solo JavaScript, alterna la clase dark-mode al contenido al hacer clic en el botón

Pruébalo tú mismo

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

Todas las lecciones de Métodos del DOM de JavaScript

1Introducción

Introducción Document Object Model

2Métodos del DOM I

getElementById Modificar el estilo del elemento getElementsByClassName Recorrer y manipular getElementsByTagName querySelector

3Métodos del DOM II

querySelectorAll addEventListener innerHTML createElement y appendChildclassList toggle