在页面加载时为多个div分配相同的随机颜色

Question

我希望图标的背景随机化为与文本相同的颜色。您可以看到有四种颜色可供选择，因此它不是完全随机的，而是在四种选择之间随机化。

http://chloesilver.ca/random.html

这是我到目前为止所做的：

HTML：

<div class="monobg">
    <img src="http://chloesilver.ca/mono1.png" alt="mono1" />
</div>

CSS：

.monobg  {
    background-color: red;
    padding:10px;
    width:60px;
}

JS：

function random_imglink(){
    var myimages=new Array();
    //specify random images below. You can have as many as you wish
    myimages[1]="This is text1.";
    myimages[2]="This is text2.";
    myimages[3]="This is text3.";
    myimages[4]="This is text4.";
    myimages[5]="This is text5.";
    myimages[6]="This is text6.";

    var ry=Math.floor(Math.random()*myimages.length);
    if (ry==0)
        ry=1;
    document.write('<p>'+myimages[ry]+'</p>');
}
document.addEventHandler("ready", function() {
    random_imglink();
    var bgcolorlist = new Array("silver", "#BAF3C3", "#c3baf3", "red");
    document.body.style.color=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
});

我认为以下链接可能是一个答案，但我似乎无法理解它： Random Hex colour from an array

Answer 1

你的代码存在很多问题，让我们来看看。

1。）永远不要像这样new Array("silver", "#BAF3C3", "#c3baf3", "red")创建一个javascript数组。它过于冗长，没有任何好处。使用数组文字语法，如下所示：["silver", "#BAF3C3", "#c3baf3", "red"]

2。）使用一个添加的变量，功能非常简单：

function randomTextAndIconColor(){
    var color = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
    document.querySelector('.monobg').style.backgroundColor = color;
    document.querySelector('body').style.color = color;
}

Answer 2

你可以这样做：

HTML：

<div class="monobg">
    <img src="http://chloesilver.ca/mono1.png" />
</div>
<p>Some text</p>

CSS：

.blue {
    color: blue;
}
.monobg {
    background-color: red;
    padding:10px;
    width:60px;
}
.blue .monobg {
    background: blue;
}
.red {
    color: red;
}
.red .monobg {
    background: red;
}
.green {
    color: green;
}
.green .monobg {
    background: green;
}

纯JS：

function setColor() {
    var colors = [" red", " green", " blue"],
        css = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector("body").className = document.querySelector("body").className + css;
}
window.addEventListener("load", setColor);

纯JS JSFiddle供参考。

jQuery的：

jQuery(function($) {
    $(document).ready(function() {
        var colors = ["red", "green", "blue"],
            css = colors[Math.floor(Math.random() * colors.length)];
        $("body").addClass(css);
    });
});

jQuery JSFiddle供参考。

说明：

在样式表中定义不同的css类（每种颜色一个），然后创建一个JS数组，其中包含每个css类作为值，并且只将其中一个随机分配给body document.ready上的元素。