Chuyển đổi classList

Bài học 13 trên 13 trong khóa học Các phương thức DOM trong JavaScript của Coddy.

Phương thức classList.toggle(class) trong JavaScript hoạt động như công tắc để thêm hoặc xóa một lớp khỏi phần tử. Ví dụ:

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

Phương thức classList.toggle() ở trên bật hoặc tắt lớp fluid-container cho phần tử có ID container.

Thử thách

Dễ

Bạn được cung cấp code HTML & CSS có nút bật/tắt và thẻ div với ID cùng các kiểu định dạng tương ứng.

Chỉ sử dụng JavaScript, bật/tắt lớp dark-mode của nội dung khi nhấn nút.

Tự làm thử

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

Tất cả bài học trong Các phương thức DOM trong JavaScript

1Giới thiệu

Giới thiệu Mô hình đối tượng tài liệu

2Phương thức DOM I

getElementById Chỉnh sửa kiểu dáng phần tử getElementsByClassName Duyệt qua và thao tác getElementsByTagName querySelector

3Các phương thức DOM II

querySelectorAll addEventListener innerHTML createElement và appendChildChuyển đổi classList

Tự luyện tập: Playground Web