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

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

我们都见过它们，它们保护我们的眼睛免受所有光线的伤害。这些是暗模式按钮，这里是如何在 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 中制作明暗模式按钮

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?