页面中random box按钮可以控制div盒子的背景色彩；
html结构代码如下
<div class='father'>
123
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<nav>
<button id="bodycolor">random body</button>
<button id="boxcolor">random box</button>
</nav>
js代码如下
//随机16进制颜色的函数
function randomColor(){
var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var colorStr='#';
for(i=0;i < 6;i++){
var index=parseInt(Math.random()*16);
colorStr+=colorList[index];
}//end for
return colorStr;
}//end function
//随机div背景颜色
document.getElementById("boxcolor").onclick=function(){
//获取页面中所有div对象，组成数组box
var box=document.getElementsByTagName("div");
//循环遍历box数组
for(i=0;i < 5;i++){
//改变div背景颜色
box[i].style.backgroundColor=randomColor();
console.log(box[i]);
}//end for
//控制台输出box中的内容
console.log(box);
}//end function
实际效果：点击按钮只能够随机父级div的背景颜色，子级div无效果
分析：在控制台中可以看出box中获取了页面中所有的div对象，而for 循环中只输出了一次box数组中的元素，如下图：
所以不明白问题出在哪里，请大牛们解答！
感谢！
本案例全部代码附在下方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机背景颜色</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
overflow: hidden;
}
button{
width: 100px;
height: 200px;
font-weight: 700;
border: 2px solid #fff;
background-color: #ccc;
color: #666;
outline: none;
position: absolute;
}
nav button:first-child{
top:0px;
left: 170px;
border-bottom: 1px solid #fff;
}
nav button:last-child{
top: 200px;
left: 170px;
border-top: 1px solid #fff;
}
button:hover{
cursor: pointer;
background-color: #666;
color: #fff;
}
.father{
margin: auto;
margin-top: 20px;
width: 900px;
height: 400px;
border: 2px solid #fff;
border-left: 0;
}
.son{
margin: 0;
width: 100px;
height: 100px;
border: 0;
float: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class='father'>
123
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<nav>
<button id="bodycolor">random body</button>
<button id="boxcolor">random box</button>
</nav>
<script>
/*随机16进制颜色的函数*/
function randomColor(){
var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
var colorStr='#';
for(i=0;i < 6;i++){
var index=parseInt(Math.random()*16);
colorStr+=colorList[index];
}//end for
return colorStr;
}//end function
/*随机rgba格式颜色的函数*/
function randomColorRgba(){
var colorStr='rgba(';
for(i=0;i<3;i++){
colorStr+=(parseInt(Math.random()*(255+1))+', ');
}//end for
colorStr+=(Math.random()+')');
return colorStr;
}
//随机body背景颜色
var bd=document.getElementsByTagName("body");
bd[0].style.backgroundColor=randomColor();
document.getElementById("bodycolor").onclick=function(){
bd[0].style.backgroundColor=randomColor();
}
//随机div背景颜色
document.getElementById("boxcolor").onclick=function(){
var box=document.getElementsByTagName("div");//获取页面中所有div对象，组成数组box
for(i=0;i < 5;i++){ //循环遍历box数组，
box[i].style.backgroundColor=randomColor();//改变div背景颜色
console.log(box[i]); //问题是：在页面中只能给box中第一个对象加上背景颜色，其他对象不行
}//end for
console.log(box);
}//end function
</script>
</body>
</html>
- Willson1991 2020-04-20 10:55:49
- 阅读 1349 收藏 0 回答 1
- 邀请
- 收藏
- 分享
- 推荐问答
- 换一换
- 配置服务器的域名问题浏览 1 回答 07-08
- 运行第二次是否是第二次登陆的用户执行的浏览 1 回答 07-26
- 工作几年后该如何提升自我浏览 1 回答 07-02
- 在做性能测试时，线程数是压的越多越好吗？压到多少线程合理？浏览 1 回答 02-23
- 【话题】从三伏天最后一伏来啦~你那边今天温度多少？浏览 3 回答 08-15
- 关于我们 联系我们 版权声明 广告服务 站长统计
- 建议使用IE 11.0以上浏览器，800×600以上分辨率，法律顾问：上海兰迪律师事务所 项棋律师
- 版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024, 沪ICP备05003035号
- 投诉及意见反馈：webmaster@51testing.com; 业务联系：service@51testing.com021-64471599-8017
- 51testing软件测试圈微信