文档流转换：相对定位转换绝对定位

最新推荐文章于 2023-03-23 10:46:05 发布

原创最新推荐文章于 2023-03-23 10:46:05 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript和CSS结合，实现网页元素的动态定位与尺寸调整，包括li标签的位置获取与设置，以及div元素的中心位置调整。通过mouseover和mouseout事件触发样式变化，实现了元素宽度、高度及边距的动态改变。

转换

//获取每一个li标签的位置
               for(var i=0;i<aLis.length;i++){
                   aLis[i].style.left = aLis[i].offsetLeft + "px";
                   aLis[i].style.top = aLis[i].offsetTop + "px";

               }
               for(var i=0;i<aLis.length;i++){
                   aLis[i].style.position = "absolute";
                   aLis[i].style.margin = "0px";
               }

中心位置设置
前提div里有margin设置

var oDiv1 = document.getElementById("div1");
            oDiv1.onmouseover = function(){
                starMove(this,{
                    width:200,
                    height:200,
                    marginLeft:-50,
                    marginTop:-50
                });
            }
            oDiv1.onmouseout = function(){
                starMove(this,{
                    width:100,
                    height:100,
                    marginLeft:0,
                    marginTop:0
                });
            }