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 ...
一周排行
  • 


    		    Mac OS X Panther 10.3簡體中文版 PC安裝圖文攻略
    650) this.width=650;" onclick='window.op ...
  • Leftmost Digit Time Limit: 2/1 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission
  • Yii是一个基于组件.用于开发大型 Web 应用的 高性能 PHP 框架.Yii 几乎拥有了 所有的特性 ,包括 MVC.DAO/ActiveRecord.I18N/L10N.caching.基于 JQuery 的 ...
  • 1.同一个目录内页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
  • 


    		    checkpoint r75實驗
    本文出自 "www.icisa.cn" 博客,请务必保留此出处http ...
  •   nargin, nargout   Number of function arguments Syntax   nargin nargin(fun) nargout nargout(fun)   Descript
  • gevent是python的一个并发框架,采用协程实现并发目的,用起来也非常简单 gevent的docs:http://www.gevent.org/contents.html 一个最简单的例子: import ge ...
  • 


    		    DNS 學習筆記之5 DNS區域詳解
    现在我们基本清楚了DNS服务器用于各种环境下的设置方式,建立是很简单的.我这里对各种区域类
  • 从低位到高位数位DP,f[i][j][k]表示已经填了后i位,转化的数字为j,后i位与x后i位的大小关系为k的方案数.   #include<cstdio> const int N=202,B=7,P=( ...
  • (function ($) { var types = ['DOMMouseScroll', 'mousewheel']; $.event.special.mousewheel = { setup: function