classList toggle

Pelajaran 13 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

method classList.toggle(class) di JavaScript berfungsi seperti sakelar untuk menambahkan atau menghapus class dari sebuah elemen. Contohnya:

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

method classList.toggle() di atas mengaktifkan atau menonaktifkan class fluid-container pada elemen dengan ID container.

Tantangan

Mudah

Kamu diberi kode HTML & CSS yang berisi tombol toggle dan div dengan ID serta gaya masing-masing.

Hanya menggunakan JavaScript, toggle class dark-mode pada konten saat tombol diklik.

Coba sendiri

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

Semua pelajaran di Metode DOM JavaScript

1Pengantar

Pengantar Document Object Model

2Metode DOM I

getElementById Ubah Gaya Elemen getElementsByClassName Telusuri dan Manipulasi getElementsByTagName querySelector

3Method DOM II

querySelectorAll addEventListener innerHTML createElement and appendChildclassList toggle

Latihan sendiri: Playground Web