offsetParent 算法分析

 更新时间:2010年04月05日 00:14:19   作者:  
以下部分内容翻译自 W3C 的 CSSOM View Module,W3C 工作草案 2008年2月22日。

当调用元素 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。

相关文章

  • document.all的一个比较完整的总结及案例

    document.all的一个比较完整的总结及案例

    document.all想必学习javascript的同学们都很了解吧,本文主要是针对一些刚入门的童鞋们做一下有关document.all的相关总结,感兴趣的朋友可以了解下,或许本文对你有所帮助
    2013-01-01
  • 详解JavaScript 为什么要有 Symbol 类型?

    详解JavaScript 为什么要有 Symbol 类型?

    这篇文章主要介绍了JavaScript 为什么要有 Symbol 类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈JavaScript 标准对象

    浅谈JavaScript 标准对象

    下面小编就为大家带来一篇浅谈JavaScript 标准对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js之onload事件的一点使用心得

    js之onload事件的一点使用心得

    window.load和window.onload的意思并不只是页面加载完就执行,那要看你怎么用了,下面做了示例为大家介绍下,感兴趣的朋友可以参考下
    2013-08-08
  • 深入理解JavaScript 函数

    深入理解JavaScript 函数

    下面小编就为大家带来一篇深入理解JavaScript 函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

    基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

    我们知道JavaScript是面向对象的脚本语言,那么既然是面向对象,继承一定是必不可少的了。JavaScript的核心是ECMAScript,JavaScript继承机制的实现其实就是ECMAScript继承机制的实现
    2013-05-05
  • 简述JavaScript对传统文档对象模型的支持

    简述JavaScript对传统文档对象模型的支持

    这篇文章主要介绍了简述JavaScript对传统文档对象模型的支持,是JS学习进阶中的重要知识,需要的朋友可以参考下
    2015-06-06
  • 浅谈js闭包理解

    浅谈js闭包理解

    这篇文章主要介绍了js闭包理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • slice函数的用法 之不错的应用

    slice函数的用法 之不错的应用

    slice函数的用法 之不错的应用...
    2006-12-12
  • javascript工具库代码

    javascript工具库代码

    这段时间用到的javascript工具库 工作中,自己边用边写的,需要的朋友可以参考下
    2012-03-03

最新评论