获取元素的偏移量

1. parentNode:父亲节点 HTML结构层级关系中的上一级元素

center.parentNode  

2. offsetParent:父级参照物 在通一个平台中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）

一般来说一个页面中所有元素的腹肌参照物都是body

通过设置 

position: relative;
position: absolute;
position: fixed;
可以改变父级参照物

3.offsetTop/offsetLeft:当前元素(外边框)距离其父级参照物(内边框)的偏移距离

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
           /* position: absolute;
            position: relative;
            position: absolute;
            position: fixed;
            position: static;
            position: inherit;*/

        }
        #outer{
            margin: 50px auto;
            padding: 50px;
            width:  180px;
            height: 180px;
            border: 10px solid #000000;
            background: orange;
        }
        #inner{
              padding: 50px;
              width:  80px;
              height:80px;
             background: green;
            /*position: relative;*/
              border: 10px solid #000000;
          }
        #center{
            width:  50px;
            height: 50px;
            border: 10px solid #000000;
            background: red;
        }
    </style>
</head>
<body>
 <div id="outer">
    <div id="inner">
        <div id="center"></div>
    </div>
 </div>
    <script type="text/javascript">
   var outer=document.getElementById("outer"),
        inner=document.getElementById("inner"),
        center=document.getElementById("center");
         // 父亲节点 HTML结构层级关系的上一级元素
         center.parentNode// inner
         inner.parentNode// outer
       /*  console.log(center.offsetParent);
         console.log(inner.offsetParent);
         console.log(outer.offsetParent);*/
        function offset(curEle){
            var par =curEle.offsetParent,
                    totalLeft=null, totalTop=null;
              totalLeft+=curEle.offsetLeft;
              totalTop+=curEle.offsetTop;
            while(par){
                totalLeft+=par.clientLeft;
                totalTop+=par.clientTop;
                totalLeft+=par.offsetLeft;
                totalTop+=par.offsetTop;
                par =par.offsetParent;
            }
         return {left:totalLeft,top:totalTop};
        }
   console.log(offset(center).left);
    </script>
</body>
</html>

 

posted @ 2017-04-21 17:12  且听风吟V  阅读(847)  评论(0)    收藏  举报