实现效果: 点击div框, 切换颜色
css代码
.item{ width:90px; height: 40px; display: inline-block; border: 2px lightblue solid; }
html代码
<div class="container"> <h2>点击切换颜色</h2><hr/> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
js代码
//获取div元素对象 let items = document.getElementsByClassName('item') //遍历并绑定事件 for(let i=0;i<items.length;i++){ items[i].onclick = function() { //修改当前元素的背景颜色 items[i].style.background = 'pink' //var声明时不可用 //this.style.background = 'pink' //var和let声明均可用 } }
如果使用 var 声明, 再使用 items[i].style.background = 'pink' 修改背景颜色, 则此时的 i 为 3,没有这个div块,会报 Cannot read properties of undefined (reading 'style') [ 无法读取未定义的属性（读取“样式”）] 的错误
for循环中 var 和 let 的区别:
var 命令的存在变量提升，var 命令实际只会执行一次。而 let 命令不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。for 的每次循环都是不同的块级作用域，let 声明的变量是块级作用域的，所以也不存在重复声明的问题。let 声明变量的for循环里，每个匿名函数实际上引用的都是一个新的变量。
