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之间的区别
javascrip中parentNode和offsetParent之间的区别的更多相关文章
- JavaScript中this和$(this)之间的区别以及extend的使用
jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...
- [转] C#中out和ref之间的区别
gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...
- iOS 中 #import同@class之间的区别
很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- android中getWidth()和getMeasuredWidth()之间的区别
先给出一个结论:getMeasuredWidth()获取的是view原始的大小,也就是这个view在XML文件中配置或者是代码中设置的大小.getWidth()获取的是这个view最终显示的大小,这个 ...
- java中JVM和JMM之间的区别
一 jvm结构 jvm的内部结构如下图所示,这张图很清楚形象的描绘了整个JVM的内部结构,以及各个部分之间的交互和作用. 1 Class Loader(类加载器)就是将Class文件加载到内存,再说的 ...
- C#中out和ref之间的区别【转】
首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...
- C#中out和ref之间的区别
首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:rel可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...
- java中String,StringBuffer,StringBuilder之间的区别
文章转载自:http://www.cnblogs.com/frankliiu-java/archive/2010/07/05/1771537.html String是固定长度的字符串,如果要发生变化必 ...
随机推荐
- SqlServer基础之(触发器)
概念: 触发器(trigger)是SQL server 提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触 ...
- Cookie中的几个概念
1. Domain Domain表示Cookie所在的域(如:www.baidu.com),对于Cookie的访问是不能跨域的(如:我们无法在www.baidu.com下访问www.google.co ...
- .net线程池内幕
本文通过对.NET4.5的ThreadPool源码的分析讲解揭示.NET线程池的内幕,并总结ThreadPool设计的好与不足. 线程池的作用线程池,顾名思义,线程对象池.Task和TPL都有用到线程 ...
- webapi swagger自定义 HTTP Header验证用户
问题描述 webapi自定义的一种验证方式(token放入header里),使用swagger测试时由于header里没值所以一直拿不到用户. 解决如下:(从标题2开始,标题1处处理全局验证用户) 1 ...
- C#动态编译
C#提供了DynamicObject和IDynamicMetaObjectProvider两种方式实现动态类型,动态类型的好处是类型的公有接口可以在运行时改变. 创建动态类型最简单的方法就是继承Dyn ...
- C#之tcp自动更新程序
.NETTCP自动更新程序有如下几步骤: 第一步:服务端开启监听 ServiceHost host; private void button1_Click(object sender, EventAr ...
- Tomcat问题,不能正确访问http://localhost:8080/
最近在学Struts2框架部分的内容,但是eclipse中配置tomcat遇到了很大的问题,当辛辛苦苦的配置完了之后,竟让连小猫的首页都不能访问,http://localhost:8080/输入了之后 ...
- 【工匠大道】markdown使用技巧
本文地址 提纲: 1. 概述 2. 常见技巧 3. 参考文档 1. 概述 常见的markdown的技巧,这里不再谈了,主要是自己感觉比较少见但有用的技巧. 2. 常见技巧 1)[空格]生成空格的效 ...
- 使用java操作MongoDB
1.环境准备 下载mongoDB对Java支持的驱动包 驱动包下载地址:https://github.com/mongodb/mongo-java-driver/downloads 2.查询集合中所有 ...
- Hadoop2.6.0安装 — 集群
文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/6034187.html 这里写点 Hadoop2.6.0集群的安装和简单配置,一方面是为自 ...