Javascript 为什么'；我的JS不能更新我的数据主题吗？

我想在导航栏中有一个按钮（

ulli

），可以在

theme=light

和

theme=dark

之间切换。但是，只有激活暗模式才能工作

代码：

我创建了一个按钮

，带有JS函数

函数暗码（）{
var=false；
if（布尔值（isOn）==false）{
document.documentElement.setAttribute（'data-theme'，'dark'）；
var=true；
}
else if（布尔值（isOn）==true）{
document.documentElement.setAttribute（'data-theme'，'light'）；
var=false；
}
}

我的css如下所示：

：root，[data-theme=“light”]{
--背景颜色：#ffffff；
--bg颜色库存：#000000；
--轮廓颜色：#000000；
--主文本：#000000；
--文本主inv:#ffffff；
--次要文本：#a4a4a4；
--文本二次悬停：#000000；
--chivo：“chivo”，无衬线；
}
[数据主题=“黑暗”]{
--背景颜色：#121212；
--背景颜色输入：#ffffff；
--轮廓颜色：#ffffff；
--主要文本：#ffffff；
--文本主库存：#000000；
--第二文本：#5b；
--文本辅助悬停：#ffffff；
}

1。通过将

isOn

设置为

false

来启动该功能。因此

Boolean（isOn）==false

alwaeys返回

true

。您应该在函数外部初始化

isOn

变量

2为什么要将

isOn

转换为布尔值？它已经是布尔类型

3如果

，您实际上不需要
。。如果不是假的，那就是真的

4.如下面的评论中所述，无需在
if else

var isOn = false;

function darkMode () {
    if(!isOn) {
        document.documentElement.setAttribute('data-theme', 'dark');
        isOn = true;
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        isOn = false;
    }
}

以更优雅的方式，您可以：

var isOn = false;

function darkMode () {

    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
    isOn = !isOn;

}

解释

+isOn
将其转换为数字，使
true
变成
1
和
false
变成
0
。
然后使用此数字作为索引，相应地选择
暗
或
亮

isOn=！isOn
翻转
isOn
-
true
的当前值变为
false
和
false
变为
true
，因为每次函数调用时，
isOn
都设置为false。正在更改的变量应该在函数之前赋值，而不是在函数内部赋值