Javascript 切换网站'；s主题/css文件

对于我的网站，我有两个不同的CSS文件。一个用于以黑色主题显示网站，另一个用于以浅色主题显示网站

现在我想让用户在这两个主题之间切换。但我不知道我该如何实现这一点。我不希望创建两个HTML文件，其中唯一的区别是一个有一个指向浅主题的链接标记，另一个指向暗主题

最好的解决方案是，用户只需单击一个按钮，主题就可以更改，而无需重新加载

这可能吗

谢谢

编辑

---

我决定接受这个答案。谢谢@void

您可以在运行时通过设置链接标签的ID来切换主题，如下所示：

在HTML文件中：

<link type="text/css" rel="stylesheet" media="all" href="../light.css" id="theme_css" />

JS

切换主题
函数switchTheme（）{
var检查=文档
.getElementById（'theme_css'））
.classList[0]=='light'；
var element=document.getElementById（'theme_css'）；
如果（检查）{
element.href='../dark.css'；
element.classList.remove（'light'）
element.classList.add（'dark'）；
}否则{
element.href='../light.css'；
element.classList.remove（'dark'）
元素.classList.add（'light'）；
}
}

---

更新

---

我已经更新了我的解决方案，使其更具动态性。您可以使用一个按钮切换“亮”和“暗”主题。

您可以在运行时通过设置链接标记的ID来切换主题，如下所示：

在HTML文件中：

<link type="text/css" rel="stylesheet" media="all" href="../light.css" id="theme_css" />

JS

切换主题
函数switchTheme（）{
var检查=文档
.getElementById（'theme_css'））
.classList[0]=='light'；
var element=document.getElementById（'theme_css'）；
如果（检查）{
element.href='../dark.css'；
element.classList.remove（'light'）
element.classList.add（'dark'）；
}否则{
element.href='../light.css'；
element.classList.remove（'dark'）
元素.classList.add（'light'）；
}
}

---

更新

---

我已经更新了我的解决方案，使其更具动态性。您可以使用一个按钮来切换明暗主题。

给样式表链接一个id

<link rel=stylesheet href=mycss.css id=shtylesheet>

如果你想做纽扣什么的

<button onclick="changeStylesheet('light.css')">Lights on</button>
<button onclick="changeStylesheet('dark.css')">Lights off</button>

灯亮起
熄灯

给样式表链接一个id

<link rel=stylesheet href=mycss.css id=shtylesheet>

如果你想做纽扣什么的

<button onclick="changeStylesheet('light.css')">Lights on</button>
<button onclick="changeStylesheet('dark.css')">Lights off</button>

灯亮起
熄灯

您不认为使用这种方法，样式转换可能会很突然吗。另外，获取新的CSS文件需要一些时间，那么用户可能需要等待，然后才能看到转换？在这里检查我的答案@void-这可能是一个更好的方法，我给出的方法有很多地方可以改进，这只是我能在5分钟内得出的最简单的答案+1是的，我完全同意……你不认为使用这种方法，风格转变可能会很突然吗。另外，获取新的CSS文件需要一些时间，那么用户可能需要等待，然后才能看到转换？在这里检查我的答案@void-这可能是一个更好的方法，我给出的方法有很多地方可以改进，这只是我能在5分钟内得出的最简单的答案+1是的，我完全同意…我仍然会建议一个更好的方法我仍然会建议一个更好的方法很好的答案，谢谢。

media=“all”

条目的目的是什么？回答得好，谢谢。

media=“all”

条目的目的是什么？