动态点击修改当前dom元素背景

最新推荐文章于 2023-04-18 11:16:23 发布

一地鸡毛_0101

最新推荐文章于 2023-04-18 11:16:23 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37555897/article/details/72599640

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

一地鸡毛_0101

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态点击修改当前dom元素背景

动态点击修改当前dom元素背景 window.onload =function(){ /* * 需求：点击某个li,让点击的那个li背景变色 */ var color = document.getElementById("color"); var lis = color.querySelectorAll
复制链接

扫一扫

专栏目录