classList toggle

Lição 13 de 13 do curso Métodos DOM do JavaScript da Coddy.

O método classList.toggle(class) em JavaScript funciona como um interruptor para adicionar ou remover uma classe de um elemento. Por exemplo:

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

O método classList.toggle() acima alterna a classe fluid-container no elemento com o ID container.

Desafio

Fácil

Você recebeu um código HTML e CSS que contém um botão de alternância e uma div com ID e as respectivas estilizações.

Usando apenas JavaScript, alterne a classe dark-mode no conteúdo ao clicar no botão

Experimente você mesmo

<!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 as lições de Métodos DOM do JavaScript

1Introdução

Introdução Document Object Model

2Métodos do DOM I

getElementById Modificar Estilo do Elemento getElementsByClassName Percorrer e Manipular getElementsByTagName querySelector

3Métodos do DOM II

querySelectorAll addEventListener innerHTML createElement e appendChildclassList toggle