<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>let的经典案例</title>
<style>
.item{
border: 1px solid aquamarine;
100px;
height: 100px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script>
// 获取3个div盒子
let items = document.getElementsByClassName('item');
// 遍历绑定事件
// var 没有块级作用域
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
// 修改当前元素的背景颜色
this.style.background='pink';
}
}
</script>
<script>
// 获取3个div盒子
let items = document.getElementsByClassName('item');
// 遍历绑定事件
for(let i=0;i<items.length;i++){
items[i].onclick=function(){
// 修改当前元素的背景颜色
items[i].style.background='pink';
}
}
</script>
</html>