每页访问随机化 stylesheet.css [关闭]答案

【问题标题】：Randomize stylesheet.css per page visit [closed]每页访问随机化 stylesheet.css [关闭]
【发布时间】：2019-07-18 19:48:09
【问题描述】：

我有一个关于样式表随机化的 JS 或 Jquery 最佳实践方法的快速问题。

我计划将 5 到 6 个不同的 stylesheet.css 文档仅处理颜色元素（背景、href、颜色）。我试图实现的是随机化每次用户访问加载哪个样式表文件（例如红色、绿色、黑色、白色）。

是否有用于此目的的 JS 库或已经在使用的常见做法？

【问题讨论】：

按顶级类名（如red）对css进行分组，然后将其添加到正文中。将加载时更改为随机颜色应该会改变一切
StackOverflow 与其说是推荐，不如说是“我有 x 代码不具备 Y 功能。有人可以帮我解决这个特定问题”。如果您发布一个您已经尝试过的示例 - 社区可能会更好地为您提供帮助。
非常感谢 Alex 和 Cerlin！
如果您只想更改一些颜色，我认为最好使用一个样式表并使用您通过 javascript 更改的 CSS 变量。

标签： javascript jquery css random

【解决方案1】：

使用这个

const stylesheets = ["main1.css","main2.css","main3.css","main4.css"];

let random = Math.floor(Math.random()*4);

document.head.appendChild('<link rel="stylesheet" href="' + stylesheets[random] + '">');

【讨论】：

谢谢Dogukan！我会试试的

【解决方案2】：

你可以试试this

HTML

<body>
    <div width="100px" height="100px" class = "innerview">

    </div>
</body>

JQuery

$(document).ready(function() {
    const colors = ["red","yellow","green","blue"];

    var index = Math.floor(Math.random()*4);
    $("body").removeClass()
    $("body").addClass(colors[index])
})

CSS

.innerview {
    height: 100px;
    width: 100px;
}

.red .innerview {
    background-color: red;
}

.yellow .innerview {
    background-color: yellow;
}

.green .innerview {
    background-color: green;
}

.blue .innerview {
    background-color: blue;
}

对于这个简单的问题，我猜加载不同的 css 会有点过分了

【讨论】：