Question

我发现的与此相关的所有其他问题都是关于更改特定元素或使用按钮更改CSS文件，但我希望找到的是：

是否有一个脚本会在刷新页面时交换整个CSS文件？

即。我已经获得了核心style.css和补充{color}.css文件，这些文件替换了style.css中的某些元素，并且我希望在刷新时随机加载这些补充CSS文件。

对不起，我甚至不知道从哪里开始。希望有人可以提供一些指示？

谢谢。

Answer 1

从根本上说，这只是随意挑选的东西，例如：

<head>
<!-- ... -->
<script>
var sheets = ["sheet1.css", "sheet2.css", "sheet3.css"];
var sheet = sheets[Math.floor(Math.random() * sheets.length)];
document.write('<link rel="stylesheet" href="' + sheet + '">');
</script>
<noscript>
<link rel="stylesheet" href="sheet1.css">
</noscript>
<!-- ... -->

（document.write实际上不是一个糟糕的解决方案的极少数情况之一。）请注意noscript后备将始终在禁用JavaScript的浏览器上使用相同的样式表。

Answer 2

使用Javascript加载CSS文件所需要做的就是将一个<link>元素添加到DOM / body中，它将自动加载。

因此，在<head>部分，您可以添加一个<script>标记，只需从数组中随机选择一个color.css并生成链接标记，最好尽早在文件中防止闪烁。

<script>
  var colors = ['red.css', 'blue.css', 'green.css'];
  var colors_idx = Math.floor(Math.random()*colors.length);

  document.write('<link href="'+colors[ colors_idx ]+'" rel="stylesheet" type="text/css" />');
</script>

（PS。有更简洁的方式来注入HTML，保持简洁，专注于解决方案。使用您最喜欢的方法，document.write可能有点变幻无常。）

刷新时更改整个CSS文件

2 个答案: