Javascript 为什么可以'；是否更新css变量名以应用不同的颜色主题？

我想通过javascript更改单个自定义变量，在scss中构建的else/if语句中切换两个css主题

我看到了很多关于如何通过javascript更改css变量中的一种或两种颜色的示例，但是我只想通过更改$theme变量来更改站点的整个主题

检查代码笔：

JS

如果我试图更新$theme它不起作用，我会尝试使用插值和不使用插值，设置“null”主题变量，等等。。它只是忽略JS指令

有人能解释为什么不工作吗？

---

谢谢

我认为你想做的事是做不到的

SCSS是一个运行在服务器端的CSS预处理器。它将编译成CSS，然后在客户端（浏览器）中呈现。一旦它被编译成CSS，所有的SCSS变量都消失了（因为浏览器只能呈现CSS）

您正在编写的JS正在浏览器（客户端）中执行

所以，如果你想这样做，你需要

• 将类指定给元素并设置其样式。然后，使用JS更改类

在CSS中

.other-theme{
color: orange;
background: purple;
}

.default-theme{
color: black;
background: blue;
}

您可以使用SCS生成此CSS样式

• 或者，您可以使用AJAX的方法将请求发送到 并获取更新的样式表

---

我认为你想做的事是做不到的
SCSS是一个运行在服务器端的CSS预处理器。它将编译成CSS，然后在客户端（浏览器）中呈现。一旦它被编译成CSS，所有的SCSS变量都消失了（因为浏览器只能呈现CSS）
您正在编写的JS正在浏览器（客户端）中执行
所以，如果你想这样做，你需要
• 将类指定给元素并设置其样式。然后，使用JS更改类
在CSS中

.other-theme{
color: orange;
background: purple;
}

.default-theme{
color: black;
background: blue;
}

您可以使用SCS生成此CSS样式
• 或者，您可以使用AJAX的方法将请求发送到 并获取更新的样式表

---

我认为您应该通过添加事件侦听器和切换类（有两个不同的类）来实现javascript而不是复杂的css
这个链接可能会有所帮助

---

我认为您应该通过添加事件侦听器和切换类（有两个不同的类）来实现javascript而不是复杂的css
这个链接可能会有所帮助

---

这是一项针对CSS变量（动态）的作业，与Sass变量（静态）不同，CSS变量在运行时工作

/*切换主题类*/
addEventListener（'click'，e=>{
document.documentElement.classList.contains（'other'）？
document.documentElement.classList.remove（'other'）：
document.documentElement.classList.add（'other'）；
})

/*默认主题*/
：根{
--初级：橙色；
--警告：紫色；
}
/*其他主题*/
：root.other{
--初级：黑色；
--警告：蓝色；
}
p{
显示：块；
填充：2rem；
/*使用主题颜色*/
颜色：var（--初级）；
背景：var（--warn）；
}

单击以切换主题类
我的同僚们都是精英。区别是错误，而不是错误。Eveniet maxime saepe fugiat Tenesiur Dignessimos enim，provident earum illo quasi fugit？

这是一项针对CSS变量（动态）的工作，与Sass变量（静态）在运行时工作不同

/*切换主题类*/
addEventListener（'click'，e=>{
document.documentElement.classList.contains（'other'）？
document.documentElement.classList.remove（'other'）：
document.documentElement.classList.add（'other'）；
})

/*默认主题*/
：根{
--初级：橙色；
--警告：紫色；
}
/*其他主题*/
：root.other{
--初级：黑色；
--警告：蓝色；
}
p{
显示：块；
填充：2rem；
/*使用主题颜色*/
颜色：var（--初级）；
背景：var（--warn）；
}

单击以切换主题类
我的同僚们都是精英。区别是错误，而不是错误。即使是最伟大的荣誉，也是最伟大的荣誉？

谢谢，你说得对！我只是忘记了scss变量的生命，因为一旦被scss处理，它们就是“静态的”。谢谢，你说得对！我只是忘记了scss变量的生命周期，因为它们一旦被scss处理后就是“静态的”。这可能是一个很好的解决方案，接近我想要实现的目标。感谢您的建议这可能是一个很好的解决方案，接近我想要实现的目标。谢谢你的建议

document.getElementById("MyElement").className = "other-theme";
document.getElementById("MyElement").className = "default-theme";

.other-theme{
color: orange;
background: purple;
}

.default-theme{
color: black;
background: blue;
}