<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态点击修改当前dom元素背景</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload =function(){
/*
* 需求:点击某个li,让点击的那个li背景变色
*/
var color = document.getElementById("color");
var lis = color.querySelectorAll("li");
/*------------------------------------------------------------------
* 循环的速度是非常快的,当点击时,for循环已经运行完毕,i已经为循环结束的值了
* 所以此处 不能以这种方式给li 添加点击事件
*
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
lis[i].style.backgroundColor = "yellowgreen";
};
}
*/
/*--------------------------------------------------------------------
* this
* 指的是当前对象
* 1、在函数外使用
* 指的是window对象
* 2、在函数内使用
* (1).函数直接被调用,this指的是window对象
* (2).被事件调用,并且以赋值的方式出现,此时,谁调用了this,this就指向谁
*
*/
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
this.style.backgroundColor = "yellowgreen";
};
}
};
</script>
</head>
<body>
<ul id="color">
<li>red</li>
<li class="black">black</li>
<li >green</li>
<li>pink</li>
<li>purple</li>
<li>yellow</li>
</ul>
<ul class="color2">
<li>red</li>
<li class="black">black</li>
<li>green</li>
<li>pink</li>
<li>purple</li>
<li>yellow</li>
</ul>
</body>
</html>
动态点击修改当前dom元素背景
最新推荐文章于 2023-04-18 11:16:23 发布