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中关于节点内容加强
Apr 11 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
分类解析jQuery选择器
Nov 23 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
JavaScript中import用法总结
Jan 20 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
详解json在php中的应用
2018/09/30 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python绘制封闭多边形教程
2020/02/18 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
计算机个人求职信范例
2014/01/24 职场文书
村官工作鉴定评语
2014/01/27 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
材料员岗位职责
2015/02/10 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL