var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "path/to/your/css/file.css";
1.要将CSS文件添加到文档中，请将link元素附加到head元素：
document.head.appendChild(link);
1.要删除CSS文件，请从head元素中删除link元素：
document.head.removeChild(link);
下面是一个切换CSS文件的示例函数：
function toggleCSS() {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "path/to/your/css/file.css";
var head = document.head;
var existingLink = head.querySelector("link[rel='stylesheet']");
if (existingLink) {
head.removeChild(existingLink);
} else {
head.appendChild(link);
}
}
var styleElement = document.getElementById('toggled-style');
function toggleStyle() {
styleElement.disabled = !styleElement.disabled;
}
<head>
<style id="always-active">
/* All your regular CSS */
body {
background-color: CornSilk;
color: CornflowerBlue;
}
</style>
<style id="toggled-style">
/* Style en/disabled by event trigger */
/*
These rules override any defined rules in 'always-active'
when 'toggles-style' is not disabled.
*/
body {
background-color: CornflowerBlue;
color: CornSilk;
}
</style>
</head>
<body>
<p>some content</p>
<button onclick="toggleStyle()">toggle</button>
</body>
2条答案
按热度按时间c6ubokkw1#
要使用JavaScript动态添加或删除CSS文件，可以使用以下方法：
1.为CSS文件创建一个link元素：
1.要将CSS文件添加到文档中，请将link元素附加到head元素：
1.要删除CSS文件，请从head元素中删除link元素：
下面是一个切换CSS文件的示例函数：
当您调用此函数时，它将在每次调用时打开和关闭CSS文件。
niknxzdl2#
当你只需要 * 切换 * 一些CSS规则时，你可以加载所有的CSS，并将需要切换/覆盖的CSS放在
<style>块的最后一行。给予
<style>一个ID或类名，然后简单地切换样式的disabled* 属性 *。下面的片段包含一个简单的概念证明。This Codepen展示了一个精心制作的演示，可以切换页面的各种样式。
BTW这也适用于
<link rel="stylesheet" id="some-external-style" href="...">。只需在JS中获取引用并切换其disabled属性。