因为循环是非常快的，我们手动点击的时候，for循环已经循环完了。如果在循环里面添加点击事件，点击事件的i的值就是循环结果的那个值，而不是对应的循环的值，此时，我们就需要用到this 来实现 点击哪一个，this就指向哪一个
this： 指的是当前的对象， 是关键词，不能当做变量名，只能读，不能写，它的值只能用来用，而不能修改
通常，this有2种用法，第一种，在函数外部使用，此时，this的值指向的是Windows
第二种，在函数内部使用。又分为2种情况，1，直接调用函数，this同样指向的是Windows 2，被事件调用，并且是以赋值的形式出现的，此时this指向的是谁调用了函数，this就指向谁的。这就很好地方便了再循环里面使用this来实现，每一个的事件发生。
可以通过以下例子开具体了解:
首先，我们先来创建几个div 实现，点击任意一个div 这个被点击的div的背景颜色就相应的作出改变 改变成为红色
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>this批量改变元素的样式</title> <link rel="stylesheet" href="../css/this批量改变元素的样式.css"></head><body><div id="content"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div></div><script src="../js/this批量改变元素的样式.js"></script></body></html> css
.box{ width: 200px; height: 200px; margin-right: 20px; background-color: gold; float: left;}
此时，页面中就有5个颜色为金色的div
js代码：
var bigDiv=document.getElementById(‘content‘);var listOfDiv=bigDiv.getElementsByTagName(‘div‘);for(var i=0;i<listOfDiv.length;i++){ listOfDiv[i].onclick=function(){ this.style.backgroundColor=‘red‘; };}
这样就可以实现，任意点击一个div 这个div的颜色就变为红色
时间： 2024-08-06 20:08:46