javascript - 即时替换 css 文件(并将新样式应用于页面)

Question

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

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

Answer 1

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

在我阅读规范时，您应该能够 activate an alternate stylesheet by changing its disabled property from true to false , 但似乎只有 Firefox 能正确地做到这一点。

所以我认为您有几个选择:

切换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>

切换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>

您可以使用 getElementById 选择样式表节点, querySelector等

(避免使用非标准的 <link disabled> 。不过设置 HTMLLinkElement#disabled 没问题。)