如何在 HTML、CSS 和 JS 中制作明暗模式按钮

zhezhongyun 2025-04-26 22:37 45 浏览

我们都见过它们，它们保护我们的眼睛免受所有光线的伤害。这些是暗模式按钮，这里是如何在 HTML、CSS 和 JS 中创建自己的按钮！

我们要做的第一件事是创建 HTML 文件。我正在使用引导程序使按钮看起来不错。我要做的第一件事是将引导程序链接到我的 HTML 文件，这样我就可以访问所有按钮。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body></body></html>

这是样板 HTML 代码。现在我将添加按钮并链接 css 样式表。如果您正在跟进，请在与您的 HTML 文件相同的目录中创建一个 style.css 文件。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body><button type="button" class="btn btn-dark">Dark Mode</button></body></html>

我使用了引导 btn-dark 类，它只是一个简单的深色按钮。

现在为 css。我将创建一个 .dark 类，但我知道我们还没有分配它。那将适用于黑暗模式。

.dark {background-color: black;}

现在，我们将添加一些 javascript。我们不会制作新文件，因为它不会那么多。我将首先给按钮一个“按钮”类，然后从那里开始工作。我将添加一个事件侦听器，然后在单击时，我将切换 HTML 主体类 dark 。然后我将向主体添加一个 ID，以便我们可以使用 JavaScript 选择它。然后我将更改文本和按钮颜色，以便我们可以来回切换。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body id="body" class=""><button type="button" class="btn btn-dark" class="button">Dark Mode</button><script>let button = document.querySelector('button');let body = document.getElementById('body');button.addEventListener('click', () => {body.classList.toggle('dark');if(body.classList.contains('dark')) {button.style.backgroundColor = "white";button.innerHTML = "Light Mode"button.style.color = "black";} else {button.style.backgroundColor = "black";button.innerHTML = "Dark Mode"button.style.color = "white";}});</script></body></html>

仅此而已！谢谢阅读。如果你喜欢，请关注！

HTML script charset 属性

上一篇：收好这个提示词!让DeepSeek帮我们生成精美网页表格!
下一篇：你喜欢的人撤回了一条消息并调戏了你，全都是套路啊

如何在 HTML、CSS 和 JS 中制作明暗模式按钮

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库