<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style>
.son1 {
height: 30px;
width: 100px;
background-color: orange;
}
.son2 {
height: 30px;
width: 100px;
background-color: red;
}
.son3 {
height: 30px;
width: 100px;
background-color: #08a9b5;
}
.son4 {
height: 30px;
width: 100px;
background-color: #9ad1c3;
}
.son5 {
height: 30px;
width: 100px;
background-color: rgb(21, 123, 126);
}
.grand_father{
display: inline-block;
}
.mother{
box-sizing: border-box;
width: 100%;
height: 250px;
margin-top: 5px;
border: 1px solid black;
background-color: orange;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="grand_father">
<div class="father">
<button class="son1">q</button>
<button class="son2">w</button>
<button class="son3">e</button>
<button class="son4">e</button>
<button class="son5">e</button>
</div>
<div class="mother">
</div>
</div>
<script>
var father = document.querySelector('.father');
var sons=father.querySelectorAll('button');
// console.log(sons);
for(var i=0;i<sons.length;i++ ){
sons[i].my_index=i;
sons[i].onclick=function(){
var ind=this.my_index;
var son_obj=window.getComputedStyle(sons[ind]);
var son_obj_color=son_obj.backgroundColor;
// document.body.style.backgroundColor= son_obj_color;
var mother = document.querySelector('.mother');
var mother_obj = window.getComputedStyle(mother);
var mother_obj_color = mother_obj.backgroundColor;
mother_obj.backgroundColor=son_obj_color;
// console.log(mother_obj_color);
}
}
</script>
</body>
</html>
你是想实现说，点击上面的按钮，然后下面的盒子颜色跟按钮一样的颜色吗