js获取css样式的方法getComputedStyle与JS for 循环中为元素添加点击事件输出问题

最新推荐文章于 2024-09-11 20:12:18 发布

popoppor

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量490

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/popoppor/article/details/121211096

版权

JavaScript 事件监听动态背景闭包数组下标

关键词由CSDN通过智能技术生成

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>20211105作业</title>
		<meta charset='utf-8'/>
		<style>
			.box{
				width:200px;
				height:200px;
				border:1px solid red;
				float:left;
				margin:10px;
			}
			
			#one{background-color:red;}
			#two{background-color:green;}
			#three{background-color:blue;}
			#four{background-color:pink;}
			
		</style>
	</head>
	<body>
		<!--准备div盒子-->
		<div class="box" id="one"></div>
		<div class="box" id="two"></div>
		<div class="box" id="three"></div>
		<div class="box" id="four"></div>
		<script>
			var box = document.getElementsByClassName('box');
			//循环
			for(var i=0; i<box.length; i++){
				//为每一个 div 盒子添加单击事件
				box[i].onclick = function(){
					//注意这里是获取css的样式
					var color = window.getComputedStyle(this).backgroundColor;
					document.body.style.backgroundColor = color;
					console.log("i0:"+i)
				}
				console.log("i1:"+i)
			}
		</script>
	</body>
</html>

i0为box.length也就是4,每次点击后不能输出当前数组下标

			var box = document.getElementsByClassName('box');
			for (var i = 0; i < box.length; i++) {
				 box[i].onclick = (function close(j) {
					 return function () {
						 alert(j);
					 }
				 })(i);
			}