css基础--位移和定位1

元素定位是动态网页设计的基础，用户通过访问和设置元素的css位置属性（left和top）可以模拟各种网页的运动效果;

获取相对包含框的位置；获取定位包含框的位置；设置元素的偏移位置；设置元素的相对位置

<div id="warp">
            <div id="sub">
                <div id="box">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function getPoint(ele){//0.获取指定元素距离左上角偏移坐标
                var x=y=0;//初始化临时变量
                while(ele.offsetParent){
                    x+=ele.offsetLeft;//累计总的x轴偏移距离
                    y+=ele.offsetTop;//累计总的y轴偏移距离
                    ele=ele.offsetParent;//把当前元素的offsetParent属性值传递给循环条件表达式
                }
                return {//遍历到body元素后，没有offsetParent属性，循环停止，把叠加的值赋值给对象直接量，并返回该对象
                    "x":x,
                    "y":y
                }
            }

offsetParent属性的支持

对于IE：当前定位元素（ID为box的div元素）的offsetParent属性将指向ID为sub的div元素。对于sub元素的offsetParent指向ID为wrap的div元素

对于支持DOM的浏览器，则当前定位元素的向ID为wrap的div元素

            //1.获取相对包含框的位置（获取相对父级元素的位置）
            function getP(ele){
                if(ele.parentNode==ele.offsetParent){//ele.offsetParent是否指向父级
                    
                    var x=ele.offsetLeft;
                    var y=ele.offsetTop;
                }else{
                    var o=getPoint(ele);
                    var p=getPoint(ele.parentNode);
                    var x=o.x-p.x;
                    var y=o.y-p.y;
                }
                return {
                    "x":x,
                    "y":y
                };
            }
            
//            var box=document.getElementById("box");
//            var o=getP(box);//获取指定元素的相对父元素的偏移坐标
//            alert(o.x);//51
//            alert(o.y);//51

//2.获取指定元素的距离包含框元素左上角的偏移坐标

function  getStyle(e,n){//e表示元素，n表示属性名，如“width”、“borderColor”
                if(e.style[n]){//若果在style中显示定义
                    return e.style[n];
                    }else if(e.currentStyle){//否则，在IE
                        return e.currentStyle[n]
                    }else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
                        n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名  borderColor--> border-Color
                        n=n.toLocaleLowerCase();//border-Color-->border-color
                        var s= document.defaultView.getComputedStyle(e,null);
                        if(s){
                            return s.getPropertyValue(n)
                        }
                    }else{
                        return null;//如果不支持，返回null
                    }
            }
            function getB(ele){\\获取指定元素的距离包含框元素左上角的偏移坐标
                return {
                    "x":(parseInt(getStyle(ele,"left"))||0),
                    "y":(parseInt(getStyle(ele,"top"))||0)
                }
            }
            
            var box=document.getElementById("box");
            var o=getB(box);//获取指定元素的距离包含框元素左上角的偏移坐标
            alert(o.x);//0
            alert(o.y);//0
            
            //3.设置元素的偏移位置(重新定位元素的位置，不考虑元素可能存在的定位置，考虑页面中经常使用绝对定位来定位元素的位置)
            function setP(ele,o){//ele设置位置的元素，o={"x":x,"y":y}
                (ele.style.position)||(ele.style.position="absolute");//如果元素静态显示，则对其进行绝对定位
                ele.style.left=o.x+"px";
                ele.style.top=o.y+"px";
                
            }
            
            //4.设置元素的相对位置（动画设计中常用到设置元素以当前位置为起点进行偏移）
            function offsetP(ele,o){//ele设置位置的元素，o={"x":x,"y":y}
                (ele.style.position)||(ele.style.position="absolute");
                ele.style.left=getB(ele).x+o.x+"px";
                ele.style.top=getB(ele).y+o.y+"px";
            }

以下对应4的html和js

        <style>
            div{
                width: 200px;height: 100px;border: solid 1px red;padding:50px;
                position:absolute;left:50px;top:50px;
            }
        </style>
        <div id="warp">
            <div id="sub">
                <div id="box">
                </div>
            </div>
        </div>
        <script type="text/javascript">
             var sub=document.getElementById("sub");
             offsetP(sub,{
                 x:10,
                 y:100
             })
        </script>