zoukankan      html  css  js  c++  java
  • javascrip中parentNode和offsetParent之间的区别

      首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。

      要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。


      在使用 offsetParent 属性获取父级对象时有以下两种情况:

      1、元素本身已经定位

        如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象,例如:

    <body>   
    <div> 
    <span id="obj1" style="position:absolute"></span> 
    </div> 
    <div id="pObj1" style="position:absolute"> 
    <span id="obj2" style="position:absolute"></span> 
    </div> 
    </body> 

         obj1.offsetParent 返回 BODY 对象
         obj2.offsetParent 返回 pObj1 对象


       2、元素没有定位
        如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象,例如:

    <table width="500" border="0"> 
    <tr> 
    <td id="td1"> 
    <div id="pObj1"> 
    <span id="obj1"></span> 
    </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <div id="pObj2" style="position:relative"> 
    <span id="obj2"></span> 
    </div> 
    </td> 
    </tr> 
    </table> 

        obj1.offsetParent 返回 td1 对象
        obj2.offsetParent 返回 pObj2 对象

    原文参见:js parentElement和offsetParent之间的区别

  • 相关阅读:
    收藏题(小试牛刀)
    博客园及相关学习地址收录
    迭代器和生成器
    字典访问的三种方法
    函数进阶(装饰器)
    函数进阶(闭包)
    wx小程序知识点(六)
    wx小程序知识点(五)
    wx小程序知识点(四)
    wx小程序知识点(三)
  • 原文地址:https://www.cnblogs.com/dige1993/p/4678412.html
Copyright © 2011-2022 走看看