javascript位置相关（一）---offset等测试

最新推荐文章于 2023-12-16 23:00:06 发布

xie1987524

最新推荐文章于 2023-12-16 23:00:06 发布

阅读量147

点赞数

分类专栏： javascipt 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xie1987524/article/details/84626369

版权

javascipt 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

元素的offsetParent属性 : 只读 属性 离当前元素最近的一个有定位属性的父节点
  
(一)：如果当前元素的DOM父节点没有定位的情况：
如果没有定位父级，默认是body  
 ie7以下，如果当前元素没有定位默认是body，
如果有定位则是html
   
 ie7以下，如果当前元素的某个父级触发了layout，
那么offsetParent就会被指向到这个触发了layout特性的父节点上
（二）：如果当前元素的DOM父节点有定位的情况：
当前元素无论是否有定位的情况，其offsetParent就是离其最近的有定位的父节点元素




元素的offsetLeft/Top : 只读 属性 当前元素到定位父级的距离（偏移值），

到当前元素的offsetParent的距离。
   

 1:如果当前元素没有定位父级
    offsetParent -> body
    offsetLeft -> html
   
   

2:元素父级有定位的情况
    
2-1：ie7以下：
     2-1-1：如果元素自己没有定位，那么offsetLeft/Top是到body的距离
      
     2-1-2：如果元素自己有定位，那么就是到定位父级的距离
    
2-2：其他浏览器：到定位父级的距离
 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>size</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    #parent {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        margin: 50px;
        border: 1px solid green;
        position: relative;
        padding: 20px;
    }
    #son {
        width: 100px;
        height: 100px;
        border: 1px solid yellow;
        margin: 50px;
        padding: 10px;
        /* position: absolute;
           	   left: 0px;
           	   top: 5px; */
    }
    /* 
            1：父类没有指定定位的时候，offsetTop就是子类的外边距(margin)+边框(border)+父类的到子类的外边距(父类的margin)101px
             offsetLeft和offsetTop在IE8中出现了不一致的情况，区别有二：
			1、>IE8的offsetLeft和offsetTop返回的是相对于offsetParent的值，而IE8之前返回的是相对于BODY的值；
			2、I>E8的offsetLeft和offsetTop返回的值是包括offsetParent的borderLeftWidth和borderTopWidth的，IE8以前是不包括的；
             2：父类指定的定位方式,那就是直接子类的top/left+子类的边距
                父类设置啦margin+padding  在ie8/chrome等高级浏览器：子类的top是top/left+父类的mg+父类的pad
                ie8以下：子类对父类的margin（外边距）
            */
    </style>

</head>

<body>
    <div id="parent">
        <div id="son">
            son
        </div>
    </div>
    <script type="text/javascript">
    window.onload = function() {

        var p = document.getElementById("parent");
        var s = document.getElementById("son");
        alert(s.offsetTop + "px"+"----"+getOffsetTop(s));



        function getOffsetLeft(o) {
            var left = 0;
            while (o != null && o != document.body) {
                left += o.offsetLeft;
                o = o.offsetParent;
            }
            return left;
        }
        /*
         *兼容ie6以上和ff的offsetTop
         */
        function getOffsetTop(o) {
            var top = 0;
            while (o != null && o != document.body) {
                top += o.offsetTop;
                o = o.offsetParent;
            }
            return top;
        }
    }
    </script>
</body>

</html>

xie1987524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript位置相关（一）---offset等测试

元素的offsetParent属性 : 只读属性离当前元素最近的一个有定位属性的父节点 (一)：如果当前元素的DOM父节点没有定位的情况：如果没有定位父级，默认是body ie7以下，如果当前元素没有定位默认是body，如果有定位则是html ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了...
复制链接

扫一扫

专栏目录