offsetParent 算法分析


Posted in Javascript onApril 05, 2010

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

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 #Javascript
jQuery 技巧小结
Apr 02 #Javascript
jquery 页面全选框实践代码
Apr 02 #Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 #Javascript
jquery select下拉框操作的一些说明
Apr 02 #Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
You might like
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
Python中random模块用法实例分析
2015/05/19 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
什么是.net
2015/08/03 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
求职信格式范本
2013/11/15 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
深入探讨opencv图像矫正算法实战
2021/05/21 Python
一篇文章弄懂Python中的内建函数
2021/08/07 Python