写在前面
最近在学习 JavaScript,说来惭愧,学习进度比较低下基础语法大概学了 30% 左右,也是工作之余来学习,然后最近按照学习进度,做了个小小的 Demo,做个记录方便下次查阅。
实现思路
id 为：app 的盒子嵌套五个小盒子,然后点击五个小盒子获取盒子的 background-color 然后改变 app 的背景颜色。
JavaScript 部分
//获取元素 app
var app = document.getElementById('app');
//打印输出一下
console.log(app.style.backgroundColor);
//获取元素 box
var box = document.querySelectorAll('.box');
//处理过程
for (let i = 0; i < box.length; i++) {
//for循环box盒子获取有多少个box。
box[i].onclick = function () {
//box的第i个被点击后应该干嘛
var color = this.style.backgroundColor;
//新建color变量等于 当前盒子的背景颜色
console.log(color);
//打印输出一下颜色
app.style.backgroundColor = '' + color + '';
//赋予id：app的背景颜色等于当前被点击的box的颜色
}
}
完整部分
<!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> </head> <style> * { padding: 0; margin: 0; } .box { width: 60px; height: 60px; font-size: 2em; font-family: Arial, Helvetica, sans-serif; line-height: 60px; text-align: center; color: #fff; box-shadow: 0px 1px 3px rgb(0, 0, 0, .13); background-color: #eee; border-radius: 12px; margin: 15px; } .flx { height: 300px; display: flex; flex-direction: row; justify-content: center; align-items: center; } </style> <body> <div style="background-color: #303F9F;" class="flx" id="app"> <div style="background-color: #F26E50;" class="box">A</div> <div style=" background-color: #F29E6D;" class="box">B</div> <div style=" background-color: #f2d680;" class="box">C</div> <div style=" background-color: #50a18e;" class="box">D</div> <div style="background-color: #6dd9bf;" class="box">E</div> </div> <script> var app = document.getElementById('app'); console.log(app.style.backgroundColor); var box = document.querySelectorAll('.box'); for (let i = 0; i < box.length; i++) { box[i].onclick = function () { var color = this.style.backgroundColor; console.log(color); app.style.backgroundColor = '' + color + ''; } } </script> </body> </html>
End
无限进步
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于