classList 切换

Coddy JavaScript DOM 方法课程的第 13 课，共 13 课。

JavaScript 中的 classList.toggle(class) 方法就像一个开关，可以为元素添加或移除类。例如：

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

上述 classList.toggle() 方法会为 ID 为 container 的元素切换 fluid-container 类。

挑战

简单

给你提供了一段 HTML & CSS 代码，其中包含一个切换按钮和一个带有 ID 的 div，以及相应的样式。

只能使用 JavaScript，在点击按钮时为内容切换 dark-mode 类。

亲手试试

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

JavaScript DOM 方法中的所有课

1简介

简介文档对象模型

2DOM 方法 I

getElementById 修改元素样式 getElementsByClassName 遍历并操作 getElementsByTagName querySelector

3DOM 方法 II

querySelectorAll addEventListener innerHTML createElement 和 appendChildclassList 切换

自己练习： Web 在线编辑器