js 对应改变样式和排斥其他样式

比眉伴天荒 2021-07-24 19:48 333阅读 0赞

对应元素改变相同样式利用循环和数组下标来做
    改变样式前，清除掉之前样式用循环来做

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style>
    			*{ 
    				padding: 0px;
    				margin:0px;
    				
    			}
    			.div1,.div2{ 
    				
    				width:600px;
    				height:300px;
    				border:solid 1px red;
    				margin:20px;
    			}
    			.div1>div{ 
    				width: 100px;
    				height:100px;
    				float: left;
    				background-color: orange;
    				margin:20px
    			}
    			.div2>div{ 
    				width: 100px;
    				height:100px;
    				float: left;
    				background-color: orange;
    				margin:20px
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    		
    		<div class="div2">
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    		<script>
    			var div1s=document.querySelectorAll(".div1 div");
    			var div2s=document.querySelectorAll(".div2 div");
    			
    			
    			for(var i=0;i<div1s.length;i++)
    			{ 
    				/* 方式一 (function(m){ div1s[m].οnmοuseοver=function() { div1s[m].style.backgroundColor="pink"; div2s[m].style.backgroundColor="pink"; } div1s[m].οnmοuseοut=function() { div1s[m].style.backgroundColor="orange"; div2s[m].style.backgroundColor="orange"; } })(i)*/
    				
    				div1s[i].index=i;
    				
    				
    				div1s[i].onmouseover=function()
    				{ 
    					
    					for(var j=0;j<div1s.length;j++)
    					{ 
    						div1s[j].style.backgroundColor="orange";
    						div2s[j].style.backgroundColor="orange";
    					}
    					
    					div1s[this.index].style.backgroundColor="pink";
    					div2s[this.index].style.backgroundColor="pink";
    				}
    			/* div1s[i].οnmοuseοut=function() { div1s[this.index].style.backgroundColor="orange"; div2s[this.index].style.backgroundColor="orange"; }*/
    			}
    		</script>
    		
    	</body>
    </html>