Question

我想要完成的是能够在刷新时更改多个元素的CSS背景颜色/颜色。我也希望它们出现在分组中。因此，不是随机颜色 - 所有指定的和＃34;设置＆＃34;。如果可能的话，我想做三种颜色（例如蓝色背景，深灰色文字，白色链接）。

例如：
配色方案1 - 蓝色背景，深灰色文字，白色链接
配色方案2 - 深紫色背景，白色链接，粉色链接
配色方案3 - 白色背景，黑色文字，绿色链接

不幸的是，我在网上找到的唯一代码是随机颜色。

我感谢所有帮助。

编辑：关注Paulie_D和Matus＆＃39;评论，我试图用更多的研究和多次试错来编写我自己的代码。最后我想出了this。

HTML：

<link id="colorscheme" rel="stylesheet" type="text/css" href="">

JavaScript的：

var stylesheets = ["schemeone.css", "schemetwo.css"];
var rand = Math.floor(Math.random() * stylesheets.length);

$(document).ready(function(){
document.getElementById("colorscheme").setAttribute("href", stylesheets[rand]);
});

然而，Oliver的代码在一个CSS文件中编译颜色方案，所以非常感谢你的选择以及给我建议和指导的每个人。

Answer 1

我注意到你标记了Jquery。这是javascript：

$( document ).ready(function() {
    var listOfClasses = ["color-scheme-1","color-scheme-2","color-scheme-3"];
    var randomNum = Math.floor(Math.random() * listOfClasses.length); 
    $("html").addClass(listOfClasses[randomNum]);
});

然后在css中你会有

html.color-scheme-1 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-1 a {
    color: #000000;
}

html.color-scheme-2 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-2 a {
    color: #000000;
}

html.color-scheme-3 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-3 a {
    color: #000000;
}

只需用所需的十六进制代码替换颜色即可。 Codepen

刷新时更改颜色方案

1 个答案: