zoukankan      html  css  js  c++  java
  • offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像Opera9.2和Firefox2以及Safair任何版本都只能通过offsetParent该属性来循环获计算获得元素的位置,效率不太好。贴一段缩减了来自YUI里的代码:

    function getElementXY(el){ //el 要获取位置的元素对象
        var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置
        var parentNode = el.offsetParent; //获得该元素的第一个非流布局父元素
        if (parentNode != el) { 
            while (parentNode) { 
                pos[0] += parentNode.offsetLeft; 
                pos[1] += parentNode.offsetTop;
                parentNode = parentNode.offsetParent; //循环定义非流布局父元素
            }
        }
    }

    MSDN解释offsetParent在大多时候返回的是Body,其实是返回第一个非流布局的父级元素,也就是postion的值是 absolute,relative,fixed,(inherit 继承父元素也是前三者)其中之一,当然如果父级元素都是流布局最后返回的肯定是Body,由此可见offsetParent本身在获取的时候要通过页面不断查找父元素,尤其在代码多层嵌套的时候,需要向上查找未知的层次,直到获取到第一个非流布局元素。

    offsetLeft和offsetTop分别返回相对offsetParent的位置,也就是返回相对第一个非流布局父级元素的位置。

    上面的代码可以看出这个方法是通过不断循环获得相对非流布局父元素的位置相加来最后计算得到要获取的位置。

    IE7对offsetParent解释有个BUG,貌似始终返回父元素。

    parentNode就不用解释了,父节点。 

    实验:

    <body>
    <div id="div1">
        div1    
        <div id="div3">
            <div id="div2">
                div2
             </div>
        </div>
    </div>
    
    </body>
    #div1{
        position:relative;
        width:300px;
        height:300px;
        border:1px solid red;
    }
    #div2{
        position:absolute;
        top:20px;
        width:200px;
        height:100px;
        background:#ccc;
    }

    var obj=document.getElementById("div2");
    console.log(obj.parentNode); //输出: div#div3
    console.log(obj.offsetParent); //输出:div#div1.

    可以看到,parentNode只是返回表面意义上的节点,而offsetParent则返回该节点相对定位的containing block。

    body元素

    document.body.parentNode 为html。

    document.body.offsetParent 为null

    参考了:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304614.html

  • 相关阅读:
    程序员是脑力劳动还是体力劳动
    我理解的技术管理的核心工作----搭班子和带团队
    Ubuntu系统下在PyCharm里用virtualenv集成TensorFlow
    我理解的技术管理的核心工作----定战略
    数据分析师岗位的一点理解
    python中读写excel并存入mysql
    mac里用PyCharm中引用MySqlDB始末
    贝叶斯网络的通俗解读
    将sqlserver导出的csv数据导入到ubuntu和mac上的mysql
    Java之Spring Cloud概念介绍(非原创)
  • 原文地址:https://www.cnblogs.com/youxin/p/3381353.html
Copyright © 2011-2022 走看看