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/

Answer 2

你的 JavaScript 有个小问题

JavaScript

var colors = ['#3399FF', '#44A1FF', '#55AAFF', '#65B2FF', '#76BBFF', '#87C3FF', '#98CCFF', '#A9D4FF', '#BADDFF', '#CAE5FF', '#DBEEFF', '#ECF6FF'],
    elems = document.getElementsByClassName('sub-header'),
    i;

for (i = 0; i < elems.length; i += 1) {
  var color = color = colors[Math.floor(Math.random() * colors.length)];
  elems[i].style.backgroundColor = color;
}

Fiddle

说明

你的代码的错误是你有类型 sub-header.style 编译器假定 sub-header 是一个变量，但它没有被定义。我们所做的是添加变量 (elems)，遍历它并应用颜色。另一个问题是变量名不支持-。我希望这会有所帮助