offsetParent 详解

网上对offsetParent和parentNode差异的解释都是同一篇文章千篇一律，讲的不是很清楚。

offsetParent用的最普遍的就是来计算元素在页面中的位置，前面的日志理讲了通过getBoundingClientRect() 来获取页面中元素的位置，不过这只支持最新的浏览器，如果要兼容像Opera9.2和Firefox2以及Safair任何版本都只能通过offsetParent该属性来循环获计算获得元素的位置，效率不太好。贴一段缩减了来自YUI里的代码：

Codefunction getElementXY(el){ //el 要获取位置的元素对象var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置var parentNode = el.offsetParent; //获得该元素的第一个非流布局父元素if (parentNode != el) { while (parentNode) {             pos[0] += parentNode.offsetLeft;             pos[1] += parentNode.offsetTop;            parentNode = parentNode.offsetParent; //循环定义非流布局父元素        }    }}

MSDN解释offsetParent在大多时候返回的是Body，其实是返回第一个非流布局的父级元素，也就是postion的值是 absolute，relative，fixed，（inherit 继承父元素也是前三者）其中之一，当然如果父级元素都是流布局最后返回的肯定是Body，由此可见offsetParent本身在获取的时候要通过页面不断查找父元素，尤其在代码多层嵌套的时候，需要向上查找未知的层次，直到获取到第一个非流布局元素。

offsetLeft和offsetTop分别返回相对offsetParent的位置，也就是返回相对第一个非流布局父级元素的位置。

上面的代码可以看出这个方法是通过不断循环获得相对非流布局父元素的位置相加来最后计算得到要获取的位置。

IE7对offsetParent解释有个BUG，貌似始终返回父元素。

parentNode就不用解释了，父节点。

转载于:https://www.cnblogs.com/qieqing/archive/2008/10/06/1304614.html

offsetParent 详解相关推荐

js中offsetParent详解
1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位 ...
js的client、scroll、offset详解与兼容性
clientWidth:可视区宽说明:样式宽+padding 参考:js的client详解 scrollTop : 滚动条滚动距离说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容: ...
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...
html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
关于元素的一些属性在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性.特别是一下这些: 尺寸相关:offsetHeig ...
html标签的下一级遍历,jquery属性,遍历,HTML操作方法详解
Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() ...
jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
$.ajax的async参数,jquery的$.ajax async使用详解
async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦. async默认是tr ...
jquery在html实现遍历,jQuery教程之jQuery遍历、HTML操作详解
本篇文章探讨了jQuery教程之jQuery遍历.HTML操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 什么是遍历? jQuery 遍历,意为"移 ...
从命令行到IDE，版本管理工具Git详解（远程仓库创建+命令行讲解+IDEA集成使用）
首先,Git已经并不只是GitHub,而是所有基于Git的平台,只要在你的电脑上面下载了Git,你就可以通过Git去管理"基于Git的平台"上的代码,常用的平台有GitHub.Gi ...

offsetParent 详解

offsetParent 详解相关推荐

最新文章

热门文章