Attivazione/disattivazione con classList

Lezione 13 di 13 del corso Metodi DOM di JavaScript di Coddy.

Il metodo classList.toggle(class) in JavaScript funziona come un interruttore per aggiungere o rimuovere una classe da un elemento. Ad esempio:

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

Il metodo classList.toggle() qui sopra attiva o disattiva la classe fluid-container per l'elemento con ID container.

Sfida

Facile

Ti vengono forniti codice HTML & CSS contenente un pulsante di attivazione/disattivazione e un div con un ID e i relativi stili.

Usando solo JavaScript, attiva/disattiva la classe dark-mode per il contenuto al clic di un pulsante.

Provalo tu

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

Tutte le lezioni di Metodi DOM di JavaScript

1Introduzione

Introduzione Document Object Model

2Metodi DOM I

getElementById Modificare lo stile di un elemento getElementsByClassName Iterare e manipolare getElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTML createElement e appendChildAttivazione/disattivazione con classList

Esercitati da solo: Playground Web