小编典典

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

javascript

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

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


阅读 959

收藏
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