如何创建 - 切换暗模式
使用 CSS 和 JavaScript 在暗模式和亮模式之间切换。
切换类
步骤 1) 添加 HTML:
使用任何应存储您要为其切换设计的内容的元素。 在我们的示例中，为了简单起见，我们将使用 <body>:
实例
<body>
步骤 2) 添加 CSS:
为 <body> 元素设置样式并为切换创建一个 .dark-mode 类:
实例
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
步骤 3) 添加 JavaScript:
获取 <body> 元素并在 .dark-mode 类之间切换:
实例
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
亲自试一试 »
提示:另请参阅如何添加类。
提示:在我们的 JavaScript 参考中详细了解 classList 属性。
