我想交换 CSS 样式表文件而不重新加载页面。我想知道如何通过单击单个源(div、#button)、返回默认值，然后连续循环列表来循环访问多个样式表的数组。如果浏览器能够记住网站当前使用的样式表以实现页面之间的连续性，那就太好了，尽管这不是必需的。以下是我到目前为止所拥有的...
HTML:
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<div id="button" style="width: 100px; height: 100px; background-color: red;"></div>
Javascript:
var stylesheets = [
"style1.css",
"style2.css",
"style3.css",
"default.css"
];
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
最佳答案
一种方法是打乱样式表列表并每次渲染第一个:
function nextSytlesheet() {
stylesheets.push(stylesheets.shift());
swapStyleSheet(stylesheets[0]);
}
但是，您想通过重新加载样式来实现什么目的？每个 CSS 文件都会向服务器发起 GET 请求，因此除非您的样式很大，否则每个应用程序拥有一个样式表并动态切换类更有意义。要模拟完整的样式表交换，您只需在前面添加 .style1 (带有尾随空格)对 style1.css 中的每个规则进行类，对其他规则执行相同的操作，然后将这些类切换到 <body>而不是重新加载样式表。
关于javascript - 通过使用 javascript 单击单个 div 循环浏览 css 样式表文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41477330/