“Let 经典案例实践”的版本间的差异
跳到导航
跳到搜索
Jihongchang（讨论 | 贡献） |
Jihongchang（讨论 | 贡献） |
||
| 第36行： | 第36行： | ||
} | } | ||
} | } | ||
| + | |||
| + | console.log(i); | ||
| + | console.log(window.i); | ||
| + | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>能不能用<code>items[i].style.background = 'red';</code>代替<code>this.style.background = 'red';</code> | + | </syntaxhighlight>能不能用<code>items[i].style.background = 'red';</code>代替<code>this.style.background = 'red';</code>？答案是不行，运行会报错：Cannot read property 'style' of undefined，因为 for 循环里的变量 i 是用 var 声明的，当循环结束时 i 的值是3，var 声明的变量没有块级作用域的概念，所以 var 声明的变量 i 一直是在全局当中存在的，这一点可以通过观察<code>console.log(i);</code>和<code>console.log(window.i);</code>在控制台的输出进行验证 |
2024年7月31日 (三) 15:45的版本
目标：实现点击 div 变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let</title>
<style>
.item {
width: 80px;
height: 40px;
border: 2px solid black;
margin-left: 10px;
}
.container {
display: flex;
}
</style>
</head>
<body>
<h2>点击切换颜色</h2>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
//获取 div 元素对象
let items = document.getElementsByClassName('item');
//遍历并绑定事件
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
//修改当前元素的背景颜色
this.style.background = 'red';
}
}
console.log(i);
console.log(window.i);
</script>
</body>
</html>
能不能用items[i].style.background = 'red';代替this.style.background = 'red';？答案是不行，运行会报错：Cannot read property 'style' of undefined，因为 for 循环里的变量 i 是用 var 声明的，当循环结束时 i 的值是3，var 声明的变量没有块级作用域的概念，所以 var 声明的变量 i 一直是在全局当中存在的，这一点可以通过观察console.log(i);和console.log(window.i);在控制台的输出进行验证