Javascript 不从数组中选择背景颜色

Question

我正在尝试用几种不同的颜色制作一个副标题，几乎就像 Ask Different 上的那个一样页。唯一的区别是，我试图让它从 Javascript 数组中随机选择一种颜色，而不是使用特定的颜色。

我已经定义了我想使用的十六进制颜色，我面临的问题是它没有在 HTML 页面中正确显示(就此而言)。有人可以指导我如何解决这个问题吗？如果这可以使用 jQuery 来完成，那也可以。

---

这是我目前所拥有的:

Javascript:

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'];

onload = changeColor();

function changeColor() {
    subheader.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

HTML:

<div class="header"></div>
<div class="subheader" id="sub1"></div>
<div class="subheader" id="sub2"></div>
<div class="subheader" id="sub3"></div>
<!-- Repeats till id="sub20" -->

CSS:

.header {
    width:100%;
    height:10%;
    position:absolute;
    background-color:#3399FF;
    left:0;
    top:0;
}
.subheader {
    height:2%;
    width:5%;
    top:10%;
    position:absolute;
}
#sub1 {left:0;}
#sub2 {left:5%;}
#sub3 {left:10%;}
/* Repeats till #sub20 */

FIDDLE

---

此外，如果有一种方法可以缩短我相当广泛的 HTML 和 CSS，也许可以使用 :nth-child() 之类的东西，如果您知道如何做，请将其包含在您的答案中。谢谢您，我们将不胜感激。

Answer 1

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'];

onload = changeColor();



    function changeColor() {
        subheader=document.getElementsByClassName('sub-header');
        for(i=0;i<subheader.length;i++){
        subheader[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        }
    }

演示:https://jsfiddle.net/2asvho0c/4/