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

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

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

回答:

您可以创建一个新链接,然后用新链接替换旧链接。如果将其放在函数中,则可以在需要的地方重复使用它。

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

以上是 快速替换css文件(并将新样式应用于页面) 的全部内容, 来源链接: utcz.com/qa/427091.html

回到顶部