切换暗/亮模式
创建于 2024-12-03 /
25
字体：
[默认]
[大]
[更大]
使用 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 属性。
0 人点赞过
