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/tiwlin/archive/2010/12/15/1906950.html

offsetParent相关推荐

深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
JS OffsetParent属性深入解析
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, ...
jQuery——parent(),parents(),offsetParent(),closets()方法
.parent() 作用:选中指定元素的直接父元素 [例]点击按钮,改变其父元素的背景颜色,效果如下代码 <html lang="en"> <head>& ...
[JavaScript][转]offsetParent和parentElement的区别
作者:未知来源于:网络转载发布时间:2006-9-30 23:42:32 一直以为offsetParent和parentElement是一回事,最近在做web控件才发现原来的理解是大错特错. ...
javascript好文---深入理解定位父级offsetParent及偏移大小
前面的话偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
parentNode，parentElement,offsetParent
offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如:<BODY><div style ...
DOM之parentNode与offsetParent
DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...
offsetParent和parentElement的区别
parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy. 而offsetParent在msdn的解释是Re ...
获取元素到body顶部的距离，offsetTop和offsetParent，getBoundingClientRect
最近在写一个可见曝光的sdk,是当元素显示在可见区域的时候才算作曝光,并上报给服务端.思路是在元素请求回来并渲染完成之后,计算元素距离document顶部的距离offset,当页面滚动的时候,计算of ...

offsetParent

offsetParent相关推荐

最新文章

热门文章