ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素，如果没有父元素或者是父元素中没有一个是定位过的，返回值就是body元素
ele.offsetLeft和ele.offsetTop取值问题，分多种情况：
- 如果ele是body的直接子元素，返回值则是ele距离body左侧或顶部的距离
- 如果ele不是body的直接子元素，在父元素进行定位(relative,absolute)的情况下，各浏览器返回值都是ele距离父元素左侧或者是
顶部的距离（唯一的区别就是chrome没有把边框计算进去，IE,firefox都计算进去了） - 如果ele不是body的直接子元素，父元素也没有进行定位的情况下，各浏览器返回的直接是ele元素距body的距离
从上面可以看出offsetLeft、offsetTop返回的值就是ele到offsetParent的距离，这个offsetParent是什么元素要看ele的父元素有没有进行定位（relative、absolute）
应用：
在要获取元素距离网页左侧距离的时候就要考虑offsetParent的定位问题，不能简单的用ele.offsetLeft/Top获取，必须通过循环累加的方式才能获得正确值（chrome的结果和IE、Firefox不一样，相差1px，原因是chrome没有把边框计算进去），下面是代码
(Tips：代码中的this.left、this.top可以用arguments.callee代替，但根据ECMAScript 5规范不建议使用，strict model下已经被禁用，因为arguments是一个比较庞大的对象，非常耗资源)
var getOffset = {
left:function(obj){
return obj.offsetLeft + (obj.offsetParent ? this.left(obj.offsetParent) : 0);
},
top:function(){
return obj.offsetTop + (obj.offsetParent ? this.top(obj.offsetParent) : 0);
}
}
到此这篇关于offsetleft、offsetTop和offsetParent的文章就介绍到这了,更多相关offsetleft、offsetTop和offsetParent内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:
- JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
- 获取offsetTop和offsetLeft值的js代码(兼容)
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
- 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
- 在IE下：float属性会影响offsetTop的取值
- top、clientTop、scrollTop、offsetTop
- offsetTop用法详解
本文由 华域联盟 原创撰写：华域联盟 » 简单谈谈offsetleft、offsetTop和offsetParent
转载请保留出处和原文链接：https://www.cnhackhy.com/42602.htm
