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

小编典典

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

javascript

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

如何删除light.css与JS的引用并删除所有已应用的样式，然后dark.css从中加载并应用所有样式？我不能简单地重置所有元素，因为某些样式是通过不同的CSS文件应用的，而某些样式是由JS动态生成的。是否有一种简单但有效的方法来执行此操作而无需重新加载页面？最好使用VanillaJS，但是无论如何我都会使用jQuery进行后续处理，因此jQ也很好。

阅读 958

2020-05-01

共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(0).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。在生产中，您需要使用不引人注目的事件侦听器。

2020-05-01