JS之DIV的z-index属性

最新推荐文章于 2021-08-11 13:55:31 发布

冯浩月

最新推荐文章于 2021-08-11 13:55:31 发布

阅读量8.5k

点赞数 3

分类专栏： B/S学习 ---JavaScript

本文链接：https://blog.csdn.net/m18633778874/article/details/79132453

版权

B/S学习同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

---JavaScript

7 篇文章 0 订阅

订阅专栏

前言

小编最近在学习JavaScript,里面有很多好玩的例子，并且语法结构也是之前遇到过但不是很理解的for循环和if语句的执行过程，现在借助一个小例子来讨论一下吧。

z-index例子展现

一、需求

两个不同颜色的div，点击任何一个，那一个就居于上方，相当于置顶的效果。

二、代码实现

1.body标签中添加两个div元素

        <body>		
		<div id="dv1"></div>
		<div id="dv2"></div>		
	</body>

2.设计style样式

（1）使用了组合样式设计，#dv1,#dv2{ };

（2）里面的position，选择了absolute（绝对定位），它和fixed一样都是脱离文档流的。

（3）z-index属性，相当于我们用到的TabIndex，获取当前的焦点。

它用来设置元素的堆叠顺序，0和1两个值，1代表位于上方。

    <style type="text/css">
		
	   #dv1,#dv2 {
		width:300px;
		height:200px;
		position:absolute;
		border:1px solid red;		
	    }
	
	    #dv1 {
	    top:50px;
		left:100px;
		background-color:blue;
		z-index:0;
	  	}
	  
	    #dv2 {	  
	        background-color:green;
		z-index:0;		
	    }
		
	</style>

3.script语句编写

 <script type="text/javascript"> 
	var dv=null;
	οnlοad=function(){
	 var dvs=document.getElementsByTagName("div");
	 for(var i=0;i<dvs.length;i++)
	 {
	  dvs[i].οnclick=function(){
	    if(dv!=null) dv.setAttribute("style","z-index:0");			 
	    this.setAttribute("style","z-index:1");
	    dv=this;
	  };
	 }
	};
 </script>

效果图

分析语句

1.for循环作用

里面用到了一个for语句循环，很好理解。这里有两个元素，循环遍历两次后，dvs获取到两个值，#dv1和#dv2。

2.if语句判断

单击绿色的框时，激发dvs[i].onclick事件，获取到i=2,但是dv=null，执行this语句，给div2标签更改属性为z-index=1

小结

通过调试，逐步思考，对这块的语句有了一定的了解，使用if语句+一个变量存值，可以代替一个for循环。

感谢您的访问！

冯浩月

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
25
评论
JS之DIV的z-index属性

前言小编最近在学习JavaScript,里面有很多好玩的例子，并且语法结构也是之前遇到过但不是很理解的for循环和if语句的执行过程，现在借助一个小例子来讨论一下吧。z-index例子展现一、需求两个不同颜色的div，点击任何一个，那一个就居于上方，相当于置顶的效果。二、代码实现1.body标签中添加两个div元素
复制链接

扫一扫