标签:rip tag alt 地方 oct win lis ges css
因为循环是非常快的,我们手动点击的时候,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的颜色就变为红色
标签:rip tag alt 地方 oct win lis ges css
原文地址:http://www.cnblogs.com/cswzl/p/6013527.html