获取元素的偏移量

最新推荐文章于 2022-06-20 20:59:37 发布

weixin_34194317

最新推荐文章于 2022-06-20 20:59:37 发布

阅读量572

点赞数

文章标签： javascript 爬虫 ViewUI

原文链接：http://www.cnblogs.com/zzzzzzzsy/p/6744526.html

版权

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>

转载于:https://www.cnblogs.com/zzzzzzzsy/p/6744526.html

weixin_34194317

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取元素的偏移量

1. parentNode:父亲节点 HTML结构层级关系中的上一级元素center.parentNode 2. offsetParent:父级参照物在通一个平台中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）一般来说一个页面中所有元素的腹肌参照物都是body通过设置position: relative;position: absolute;...
复制链接

扫一扫