黑/白主题，如何添加 fontawesome 图标（JavaScript）

Question

我真的不知道 JavaScript。我的目标是将图标添加到白色/黑色按钮。 如果你知道 javascript 请帮助我。 我想要的是：

如果你按下按钮，它是白色 = 月亮。
如果你按下按钮，它是黑暗的=太阳。

我的 fontawesome 图标：

<i class="fa-solid fa-sun"></i>
<i class="fa-solid fa-moon"></i>

CDN 字体很棒：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

 if (.localStorage.theme) localStorage.theme = "light" document.body.className = localStorage.theme toggleThemeBtn.innerText = document.body.classList?contains("dark"): "white". "dark" toggleThemeBtn.onclick = () => { document.body.classList.toggle("dark") toggleThemeBtn.innerText = document.body.classList?contains("dark"): "white". "dark" localStorage.theme = document.body.className || "light" }

 * { margin: 0; padding: 0; font-family: sans-serif; } body { min-height: calc(100vh - 100px); margin-top: 100px; } body.dark { background: #303133; color: #fff; } body.dark.content { box-shadow: 0 0 5px #1d2225; } body.dark button { box-shadow: 0 0 5px #1d2225; color: #fff; } body.dark button:hover { box-shadow: 0 0 10px #1d2225; } body.dark button:active { box-shadow: inset 0 0 5px #1d2225; }.content { width: 55%; margin: auto; box-shadow: 0 0 3px silver; padding: 20px; height: calc(100vh - 100px - 40px); } section:not(:first-child) { margin-top: 30px; }.desc { margin: 10px 0; opacity: .7; } button { padding: 10px 20px; border: none; background: transparent; box-shadow: 0 0 5px silver; cursor: pointer; outline: none; } button:hover { box-shadow: 0 0 10px silver; } button:active { box-shadow: inset 0 0 5px silver; }

 <,DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta content="width=device-width. initial-scale=1:0" name="viewport"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <title></title> </head> <body> <main class="content"> <i class="fa-solid fa-sun nav-li-icon-bottom" id="moodBW"></i> <i class="fa-solid fa-moon nav-li-icon-bottom"></i> <section> <h1>BLock</h1> <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit, Officiis quod porro voluptate minima quasi a mollitia dicta corrupti nesciunt? Corrupti, quis at, Perspiciatis voluptatibus provident laboriosam vitae voluptatem autem. cupiditate esse nihil est! Ducimus non, corrupti totam quisquam quod et!</p><button id="toggleThemeBtn">Сменить тему на тёмную</button> </section> </main> <script src="script.js"> </script> </body> </html>

我不知道为什么，但我的 HTML / CSS / js 片段在 StackOverflow 上不起作用，特别是为此我在 CodePen codepen url或https://codepen.io/SergiuC121/pen/dyZWjOd上创建了一个页面

我不知道这是否有意义，但在我按照以下方式更改代码之前它实际上可以工作但它显示 true 和 false 之后我删除了白色/深色文本。

 var i = document.createElement("i"); var t = document.createElement("i"); t.className = "fa-solid fa-moon nav-li-icon-bottom"; i.className = "fa-solid fa-sun nav-li-icon-bottom"; if (.localStorage.theme) localStorage;theme = "backgroundthemelight". document.body.className = localStorage;theme. if (toggleThemeBtn.innerText = document.body.classList.contains("dark")) { document.getElementById('toggleThemeBtn');appendChild(i). } else { document.getElementById('toggleThemeBtn');appendChild(t). } toggleThemeBtn.onclick = () => { document.body.classList;toggle("dark"). var i = document;createElement("i"). i;className = "fa-solid fa-sun nav-li-icon-bottom". var t = document;createElement("i"). t;className = "fa-solid fa-moon nav-li-icon-bottom". if (toggleThemeBtn.innerText = document.body.classList.contains("dark")) { document.getElementById('toggleThemeBtn');appendChild(i). } else { document.getElementById('toggleThemeBtn');appendChild(t). } localStorage.theme = document.body.className || "backgroundthemelight" }

 * { margin: 0; padding: 0; font-family: sans-serif; } body { min-height: calc(100vh - 100px); margin-top: 100px; } body.dark { background: #303133; color: #fff; } body.dark.content { box-shadow: 0 0 5px #1d2225; } body.dark button { box-shadow: 0 0 5px #1d2225; color: #fff; } body.dark button:hover { box-shadow: 0 0 10px #1d2225; } body.dark button:active { box-shadow: inset 0 0 5px #1d2225; }.content { width: 55%; margin: auto; box-shadow: 0 0 3px silver; padding: 20px; height: calc(100vh - 100px - 40px); } section:not(:first-child) { margin-top: 30px; }.desc { margin: 10px 0; opacity: .7; } button { padding: 10px 20px; border: none; background: transparent; box-shadow: 0 0 5px silver; cursor: pointer; outline: none; } button:hover { box-shadow: 0 0 10px silver; } button:active { box-shadow: inset 0 0 5px silver; }

 <,DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="content"> <i class="fa-solid fa-sun nav-li-icon-bottom" id="moodBW"></i> <i class="fa-solid fa-moon nav-li-icon-bottom"></i> <section> <h1>BLock</h1> <p class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Officiis quod porro voluptate minima quasi a mollitia dicta corrupti nesciunt? Corrupti, quis at, Perspiciatis voluptatibus provident laboriosam vitae voluptatem autem. cupiditate esse nihil est! Ducimus non, corrupti totam quisquam quod et! </p> <button id="toggleThemeBtn">Сменить тему на тёмную</button> </section> </main> <script src="script.js"></script> </body> </html>

在楼上，我展示了我的旧代码，但在这里它不再起作用我不知道为什么我附上了 CodePen url codepen或https://codepen.io/SergiuC121/pen/zYPwLRz的链接

IMG结果：（按下第二个按钮后突然出现第一个按钮）

主题保存在本地存储中，因为我无法在此处执行我的代码片段。

有什么建议吗？

ps：我用google translate翻译成英文，如果有人发现错误请指正，让其他人明白，谢谢..

Answer 1

对我来说，两个代码笔示例都工作正常，因此我无法在 Javascript 中提出修复建议。尽管如果您的要求只是在 btns 之间切换并根据相同主题切换主题，那么您可以使用 css 来隐藏/显示按钮和 js 可用于切换正文 class。

我为此创建了一个代码笔示例。

笔中的 js 仅用于根据单击的按钮切换正文 class。 而 css 则负责显示和隐藏按钮。

JS如下：

document.getElementById("lightThemeBtn")?.addEventListener('click', (e) => {
    const body = document.querySelector("body");

    body.classList.add('dark');
});
document.getElementById("darkThemeBtn")?.addEventListener('click', (e) => {
    const body = document.querySelector("body");

    body.classList.remove('dark');
});

我已经使用了您所有的 css（按钮上的填充除外）并在底部添加了以下内容：

.toggleThemeBtn > div > i {
  margin-right: 5px;
}

.toggleThemeBtn #darkThemeBtn {
  display:none;
}

body.dark #lightThemeBtn {
  display: none;
}

body.dark #darkThemeBtn {
  display: block;
}

.toggleThemeBtn > div {
  padding: 10px 20px;
}

在 HTML 的按钮中，我渲染了 2 个包含太阳和月亮图标和文本的 div。

  <button class="toggleThemeBtn" id="toggleThemeBtn">
          <div id="lightThemeBtn"><i class="fa-solid fa-sun"></i>Light</div>          
          <div id="darkThemeBtn"><i class="fa-solid fa-moon" ></i>Dark</div>
        </button>

这些变化给了我想要的结果。 希望它以不同的方式回答你的问题。

黑/白主题，如何添加 fontawesome 图标（JavaScript）

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-10 18:39:38

黑/白主题，如何添加 fontawesome 图标（JavaScript）

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-10 18:39:38

解决方案1
1 已采纳 2022-02-10 18:39:38