offsetParent 算法分析

当调用元素 A 的 offsetParent 属性时，必须按以下算法返回元素。

以下任一条件为真时，返回 null，并停止本算法。
A 是根元素。
A 是 HTML 的 body 元素。
元素 A 的 position 属性计算值是 fixed。注 1
如果 A 是 HTML 元素 area，并且在其上级元素链中有 HTML 元素 map，返回上级元素链中距 A 最近的 HTML 元素 map，并停止本算法。注 2
如果以下任一条件为真时，返回距 A 最近的符合下述条件的上级元素，并停止本算法。
上级元素的 position 属性计算值不是 static。注 3
上级元素是 HTML 的 body 元素。注 4
A 的 position 属性计算值是 static，上级元素是 td、th 或 table。
返回 null。
前面已经提到，以上是工作草案的内容，所以与现行的浏览器不一定一致，注释如下：

注 1 Firefox 不适用；IE 6 不适用；DOCTYPE 使 IE 7 不支持 fixed 时不适用（以下简称 IE 6 模式）。
注 2 Firefox 不适用。
注 3 上级元素的 position 属性计算值是 fixed，并且 IE 6 或者 IE 6 模式不适用。
注 4 IE 7 模式中，如果元素的 position 属性计算值是 absolute 或 relative，返回元素 HTML，而不是 BODY。
总结

由此看出，获得 offsetParent 在各个浏览器中，各个浏览器的各个版本中，同一版本的不同模式中，都有不同的算法，实在有些麻烦。所以还是建议将其理解为通过 offsetParent 循环和 offsetLeft、offsetTop 可以获得控件在浏览器中的绝对位置即可。

但庆幸的是有一种常见布局在各种浏览器中 offsetParent 是一样的，那就是：外层元素 div 的 position 计算值是 relative、absolute 时，内层元素 div 的 offsetParent 总是外层元素 div。

赞 (0)

相关推荐

  • offsetParent 算法分析

    当调用元素 A 的 offsetParent 属性时,必须按以下算法返回元素. 以下任一条件为真时,返回 null,并停止本算法. A 是根元素. A 是 HTML 的 body 元素. 元素 A 的 position 属性计算值是 fixed.注 1 如果 A 是 HTML 元素 area,并且在其上级元素链中有 HTML 元素 map,返回上级元素链中距 A 最近的 HTML 元素 map,并停止本算法.注 2 如果以下任一条件为真时,返回距 A 最近的符合下述条件的上级元素,并停止本算法.

  • Java 四种基本加密算法分析

    Java 四种基本加密算法分析 简单的java加密算法有: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algorithm,安全散列算法) HMAC(Hash Message Authentication Code,散列消息鉴别码) 1. BASE64 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的

  • C语言求解最长公共子字符串问题及相关的算法分析

    C语言求解最长公共子字符串问题及相关的算法分析

    题目:如果字符串一的所有字符按其在字符串中的顺序出现在另外一个字符串二中,则字符串一称之为字符串二的子串.注意,并不要求子串(字符串一)的字符必须连续出现在字符串二中.请编写一个函数,输入两个字符串,求它们的最长公共子序列,并打印出最长公共子序列. 例如:输入两个字符串BDCABA和ABCBDAB,字符串BCBA和BDAB都是是它们的最长公共子序列,则输出它们的长度4,并打印任意一个子序列. 分析:求最长公共子序列(Longest Common Subsequence, LCS)是一道非常经典的

  • JS OffsetParent属性深入解析

    offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素:在怪异呈现模式下为body元素)的引用. 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null. 句法:parentObj

  • js parentElement和offsetParent之间的区别

    首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性. 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下. 要明白 offsetParent 属性,要先明白"已定位元素" 这个名字,所谓&

  • jQuery中offsetParent()方法用法实例

    本文实例讲述了jQuery中offsetParent()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素. 所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素. 此方法仅对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).offsetParent() 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html>

  • Javascript拖拽系列文章1之offsetParent属性第1/3页

    第一篇就先讲讲Javascript中的offsetParent属性吧. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy

  • 简单谈谈offsetleft、offsetTop和offsetParent

    ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏览器返回值都是ele距离父元素左侧或者是 顶部的

  • JavaScript offsetParent案例详解

    1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute  relative fixed),如果其父元素中不存在定位则offsetParent为:body元     素 2. 根据定义分别存在以下几种情况 元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null) 元素自身无fixed定位,且父元素也不存在定位,offsetPa

  • python数据结构算法分析

    python数据结构算法分析

    目录 1.算法分析的定义 2. 大O记法 3. 不同算法的大O记法 3.1 清点法 3.2 排序法 3.3 蛮力法 3.4 计数法 4. 列表和字典操作的复杂度 4.1 列表 4.2 字典 前文学习: python数据类型: python数据结构:数据类型. python的输入输出: python数据结构输入输出及控制和异常. python面向对象: python数据结构面向对象. 今天我们来学习的内容是面试题中都避免不小了的问题,就是算法分析了,什么是算法分析,算法分析是用来分析一个算法的好坏

随机推荐