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

yuyutoo 2025-05-02 14:25 4 浏览 0 评论

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

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

scriptlet

上一篇：统信UOS|DNS server|02-部署DNS服务器
下一篇：计算属性computed和侦听属性watch有什么区别?你会使用它们吗?

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

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

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

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程