Javascript 为多个div元素的左边框生成随机颜色

我已经做了两个小时了，没有找到解决办法。 所以不要说这个问题已经得到了回答，因为这与为一个元素生成随机颜色有些不同。 无论如何，我的这部分代码不起作用：

函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数setRandomBorderColor（）{
var i；
var contentbox=document.getElementsByClassName（“.content box”）；
for（var i=0；i=contentbox.length；i++）{
contentbox[i].css（“左边框颜色”，getRandomColor（））；
};
}

您已经用jquery标记了这个问题，但似乎主要使用纯javascript。我在下面提供了一个jquery解决方案（代码略短），如果您需要的话，还提供了一个可以工作的javascript解决方案。目前，您正在将jquery选择器和样式化命令与javascript所选元素相结合（这是行不通的！）

---

JQuery解决方案 下面的代码按照您的意愿运行，它使用jquery使用class

.content box

对每个div进行迭代，并使用生成器指定一个随机颜色。它比下面的纯javascript代码版本要简单一些

//设置初始颜色
setRandomBorderColor（）；
//如果单击按钮，则更改颜色
$（“#更改颜色”）。单击（函数（）{
setRandomBorderColorPureJS（）；
});
//为所有内容框元素指定随机颜色
函数setRandomBorderColor（）{
$（“.content box”）。每个（函数（）{
$（this.css（“border left color”，getRandomColor（））；
});
};
//生成随机颜色
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}

.content框{
边框：5px纯黑；
保证金：5px；
填充物：5px；
最小高度：30px；
最小宽度：30px；
浮动：左；
}

变色

您的代码中几乎没有错误

document.getElementsByClassName（）

只接受类名作为参数，不接受点。所以它应该是

document.getElementsByClassName（'content-box'）

在

for

循环条件中，必须编写

i

而不是

i=contentbox.length

。查看文档

不能对本机DOM元素调用

css（）

函数（从

document.getElementsByClassName（）

函数获取）。要更改本机DOM元素的CSS属性，应使用

contentbox[i].style.borderLeftColor=getRandomColor（）

（）。如果要使用

.css（）

，应该使用jQuery

声明

i

变量两次（在循环之前和循环条件内部）。它不会导致任何错误，但您不需要这样做

因此，您的代码应该如下所示：

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } 函数setRandomBorderColor（）{ var contentbox=document.getElementsByClassName（“内容框”）； 对于（变量i=0；i}您是在使用带点（

“.content box”

）的类名，还是在

文档.getElementsByClassName（“.content box”）

？

函数getRandomColor（）{return“#”+（（Math.random（）*0x1000000）| 0x1000000）。toString（16）.slice（1）}

仍然不起作用。我只是不知道。。不过还是要谢谢你的帮助，如果你的帮助有效的话，请告诉我。我也发现了我的错误，我修复了一切。非常感谢！最后一点是，如果边框不存在，则不会创建边框，只会更改现有边框的颜色。确保已设置左边框：2px纯黑；在.content-box的样式中