Javascript 我可以向CSS变量添加类名吗？

是否可以向CSS变量添加一个类名，或者是否有其他方法来设置它，这样我就不必直接通过javascript操作每个单独的变量？我想把我所有的样式都保存在CSS中，并简单地用JS打开相关的类。例如，如果CSS中可能出现类似的情况：

:root.white{ --bgcol:#FFF; --col:#000; }
:root.black{ --bgcol:#000; --col:#FFF; }

然后我可以从javascript中切换

.black

或

.white

类，以触发所有变量的更改。对于这种类型的设置，最好的方法是什么？

坦白地说，这是最好的方法（就像大多数惯用的方法一样）——使用类名，如果不是完全独立的样式表（），通过自定义属性对整个布局进行主题化。这是最“基本的CSS”方法，JavaScript只是使主题切换工作的粘合剂。你真的没有比这更好的了

对于那些不知道

：root

是什么意思并且想知道类名到底应用在哪里的人来说，它是

html

元素（body的父元素）。所以这里没有什么特别的事情-您只是在

html

元素上切换类名。碰巧全局自定义属性是为文档根元素定义的，因为它位于继承链的顶层

如果有任何与主题无关的自定义属性，以及应用于根元素的样式属性（即非自定义属性），请将它们保留在自己的非限定

：root

规则中，与主题自定义属性分开，这样它们就不会受主题切换的影响。下面是一个例子：

const root=document.documentElement；
//默认主题-应在标记中以声明方式分配，而不是JS
//对于无类默认主题，将其自定义属性移动到unqualified:root
//同样，将它与另一个分开：包含非主题道具的根规则
//记住，瀑布是你的朋友，不是敌人
root.classList.add（'white'）；
document.querySelector（'button'）。addEventListener（'click'，function（）{
root.classList.toggle（'white'）；
root.classList.toggle（'black'）；
});
：根目录{
--间距：1rem；
颜色：var（--col）；
背景色：var（--bgcol）；
}
：root.white{
--bgcol:#FFF；
--col:#000；
}
：root.black{
--bgcol:#000；
--上校：#FFF；
}
p{
保证金：var（--间距）；
边框：细虚线；
填充：var（--间距）；
}
切换主题
你好，世界使用
：root
选择器与使用
html
完全相同，只是其特定性更高，因此使用这种方法没有问题

例如：

：根目录{
--背景：红色；
}
：root.blue{
--背景：蓝色；
}
// ...
div{
背景：var（--bg）；
}

稍后，您只需更改
html
的类和变量即可

您可以看到一个示例。
将此应用于
主体，而不是根元素和您的完成。CSS变量不需要在rootappy to
body
或某个包装div中定义，而不是在
：root
中定义。惯例始终是在：root中定义全局自定义属性，即使是。偏离惯例不会带来任何好处。@ BoTcLeTrtrue，但在这种情况下，我们需要考虑类切换更好的目标体或HTML，在这里很容易用JS操作。@ Temani Afif：不理解：根不是避免使用它的原因，也不是打破可能会破坏样式表的约定的原因。（特殊性、继承性等）。这是了解它的一个理由，这样你就可以充分利用它。非常酷，这正是我想要的。有趣的是，我与我的假设非常接近。我不知道
：root
只是
html
标签。谢谢！在你的问题下的对话之后，我考虑过了这一点，所以我认为添加一个初级读物不会有什么坏处。我很高兴我现在做了，很高兴你学到了一些新东西。@BoltClock你不应该使用
classList.toggle
，以避免破坏元素上的其他类使用吗？@wizzwizz4：当然。我在组合这些内容时没有过多考虑JS健壮性，但我已经更新了它。