<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 830px;
height: 200px;
background-color: #fff;
margin: 100px auto;
padding: 20px;
display: flex;
justify-content: space-between;
}
.box div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="color1" style="background-color:#f0f;"></div>
<div class="color2" style="background-color:#ff0;"></div>
<div class="color3" style="background-color:#f00;"></div>
<div class="color4" style="background-color:#00f;"></div>
</div>
<script>
// 1.获得所有的颜色盒子
const colors = document.querySelectorAll('.box div')
// 2.获得换颜色的背景
const body = document.querySelector('body')
// 3.给所有颜色盒子设置鼠标点击效果
for(let i=0;i<colors.length;i++){
colors[i].addEventListener('click',function(){
body.style.backgroundColor = `${this.style.backgroundColor}`
})
}
</script>
</body>
</html>
点击切换背景
最新推荐文章于 2024-01-11 23:00:00 发布