Przełączanie classList

Lekcja 13 z 13 w kursie Metody DOM w JavaScript w Coddy.

Metoda classList.toggle(class) w JavaScript działa jak przełącznik, który dodaje lub usuwa klasę elementu. Na przykład:

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

Powyższa metoda classList.toggle() przełącza klasę fluid-container elementu o identyfikatorze container.

Wyzwanie

Łatwy

Otrzymujesz kod HTML & CSS zawierający przycisk przełączający oraz element div z ID i odpowiednimi stylami.

Używając wyłącznie JavaScript, po kliknięciu przycisku przełącz klasę dark-mode dla treści.

Spróbuj swoich sił

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

Wszystkie lekcje w sekcji Metody DOM w JavaScript

1Wprowadzenie

Wprowadzenie Model obiektowy dokumentu

2Metody DOM I

getElementById Modyfikowanie stylu elementu getElementsByClassName Iterowanie i manipulowanie getElementsByTagName querySelector

3Metody DOM II

querySelectorAll addEventListener innerHTML createElement i appendChildPrzełączanie classList

Poćwicz samodzielnie: Edytor online Web