问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

即时替换 css 文件（并将新样式应用于页面）

社区维基
1
新手上路，请多包涵

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

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

原文由 Xeos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlcss
阅读 995
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以创建一个新链接，并将旧链接替换为新链接。如果你把它放在一个函数中，你可以在任何需要的地方重用它。

Javascript：

 function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}

的HTML：

 <html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

为简单起见，我使用了内联 javascript。在生产中，您可能希望使用不显眼的事件侦听器。

原文由 Matthew Johnson 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

在我阅读规范时，您应该能够 通过将其 disabled 属性从 true 更改为 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 没问题。）

原文由 sam 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题