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之间的区别

  • 相关阅读:
    CCF-CSP的第三题们么
    STL
    信息安全-期末复习
    NLP自然语言处理
    python 处理文件
    信息安全-简易的DES加解密--3DES
    试药的常见问题
    关于试药的那些事
    Excel的单列和多列的拆分与合并
    Excel中的文本提取操作
  • 原文地址:https://www.cnblogs.com/dige1993/p/4678412.html
Copyright © 2011-2022 走看看