I have a page which has <link> in the header that loads the CSS named light.css. I also have a file named dark.css. I want a button to swap the style of the page all together (there are 40 selectors used in css file and some do not match in two files).
我如何用JS删除对light.css的引用，删除所有应用的样式，然后加载dark.css并应用其中的所有样式？我不能简单地重置所有元素，因为有些样式是通过不同的css文件应用的，有些是由JS动态生成的.有没有一种简单而有效的方法可以在不重新加载页面的情况下实现这一点？Vanilla JS更可取，不过我会在以后的处理中使用jQuery，所以jQ也可以.
您可以创建一个新链接，并用新链接替换旧链接.如果您将其放入函数中，则可以在需要的任何地方重用它.
The 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.在制作中，你会希望使用不引人注目的事件监听器.