动态替换 css 文件（并将新样式应用到页面）

我有一个页面有<link>在加载名为 CSS 的标头中light.css。我还有一个名为dark.css。我想要一个按钮来交换页面的样式（css 文件中有 40 个选择器，有些在两个文件中不匹配）。

我怎样才能删除对light.css用JS删除所有应用的样式然后加载dark.css并应用其中的所有样式？我不能简单地重置所有元素，因为有些样式是通过不同的 css 文件应用的，有些是由 JS 动态生成的。有没有一种简单而有效的方法可以在不重新加载页面的情况下做到这一点？ Vanilla JS 更好，但无论如何我都会使用 jQuery 进行后续处理，所以 jQ 也可以。

您可以将所有样式表包含在文档中，然后根据需要激活/停用它们。

在我阅读规范时，您应该能够通过更改其来激活备用样式表disabled属性从 true 到 false https://stackoverflow.com/revisions/19844757/5，但似乎只有 Firefox 可以正确执行此操作。

所以我认为你有几个选择：

Toggle rel=alternate

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

设置和切换disabled

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate">

<script>
function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);
</script>

Toggle media=none

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark">

<script>
function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}
</script>

您可以选择样式表节点按 ID 获取元素 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById, 查询选择器 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector, etc.

（避免非标准<link disabled>。环境HTMLLinkElement#disabled https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement#Properties不过还好。）