Javascript 切换时更改标签文本

目前，我的浏览器中有一个暗模式开关，当我打开时，我的网站变为黑色，当我关闭时，我的网站变为白色

但问题是，我想更改切换旁边的“暗模式”标签，以便在切换关闭时文本更改为“亮模式”，在切换打开时文本更改为“暗模式”

我该怎么做

下面是它的最新图片（注意：“暗”一词根本不会随着开关而改变）

HTML的摘录：

暗模式

javascript的摘录：

const-darkSwitch=document.getElementById（“darkSwitch”）；
函数initTheme（）{
常数=
null！==localStorage.getItem（“暗开关”）&&
“暗”==localStorage.getItem（“暗开关”）；
（darkSwitch.checked=e），
E
？document.body.setAttribute（“数据主题”、“暗”）
：document.body.removeAttribute（“数据主题”）；
}
函数resetTheme（）{
黑开关，检查过了
？（document.body.setAttribute（“数据主题”、“暗”），
setItem（“暗开关”、“暗”））
：（document.body.removeAttribute（“数据主题”），
localStorage.removietem（“暗开关”）；
}
window.addEventListener（“加载”，（）=>{
暗器&&
（initTheme（），
darkSwitch.addEventListener（“更改”，（）=>{
重置主题（）；
}));
});

CSS的摘录：

[data-theme=“dark”]{
背景色：#111！重要；
颜色：#eee；
}
[数据主题=“暗”]。背景光{
背景色：#333！重要；
}
[data-theme=“dark”].bg白色{
背景色：#000！重要；
}
[data-theme=“dark”].bg黑色{
背景色：#eee！重要；
}
/*表格的CSS*/
[data-theme=“dark”]表格{
背景色：#111！重要；
颜色：#eee；
}

为标签提供ID，并使用DOM更改文本

<label class="custom-control-label" for="darkSwitch" id="darkLabel">Dark Mode</label>

---

在您的情况下，将ID添加到要更改的文本中：

<label class="custom-control-label" id="modelLabel" for="darkSwitch">Dark Mode</label>

---

希望它有帮助：）

您可以从标签中删除文本，然后使用css

：before

将内容添加到标签中

[for="darkSwitch"]:before{
  content:'Dark Mode'
}

[data-theme="dark"] [for="darkSwitch"]:before{
  content:'Light Mode'
}

---

在

上演示在我看来，JavaScript太过努力了，不太聪明。过度使用三元运算符和逗号运算符只会使代码更难阅读，并会导致错误，因为其他人被要求修改代码。

[for="darkSwitch"]:before{
  content:'Dark Mode'
}

[data-theme="dark"] [for="darkSwitch"]:before{
  content:'Light Mode'
}