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

更多相关文章
  • 1.说明 nil:指向oc中对象的空指针 Nil:指向oc中类的空指针 NULL:指向其他类型的空指针,如一个c类型的内存指针 NSNull:在集合对象中,表示空值的对象   若obj为nil: [obj messa
  • JavaScript中this和$(this)之間的區別以及extend的使用
    jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象
  • echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print只能打印出简单类型变量的值(如int,string) print_r可以打印出复杂类型变量的值(如数组,对象) echo -- 输出一个或者多个字符串 Description void
  • TCP中close和shutdown之間的區別
    该图片截取自<<IP高效编程-改善网络编程的44个技巧>>,第17个技巧.  如果想验证可以写个简单的网络程序,分别用close和shutdown来断开连接,然后用tcpdump查看交互过程,就一目了然了.本来我想自己写个程序验证,但是自己笔记本上没有linux环境,公司环境 ...
  • /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/profile # System wide environment and startup progra
  • 


    		    Linux中rc.local、profile、bashrc、bash_profile之間的區別和聯系
    使用者自订启动启动程序 (/etc/rc.d/rc.local) 在完成默认 runlevel 指定的各项服务的启动后,如果我还有其他的动作想要完成时,举例来说, 我还想要寄一封 mail 给某个系统管理帐号,通知他,系统刚刚重新启动完毕,那么是否应该要制作一个 shell script 放置在 /
  • iOS中NSNotification.delegate.KVO三者之间的区别与联系?   delegate.notification和KVO他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢?               在开发ios应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前
  • Spring中Bean的命名 1.每个Bean可以有一个id属性,并可以根据该id在IoC容器中查找该Bean,该id属性值必须在IoC容器中唯一: 2.可以不指定id属性,只指定全限定类名,如: <bean class="com.zyh.spring3.hello.StaticBe ...
一周排行