先来看看offsetParent返回的是什么值
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没有把边框计算进去),下面是代码
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);
}
};

Tips:代码中的this.left、this.top可以用arguments.callee代替,但根据ECMAScript 5规范不建议使用,strict model下已经被禁用,因为arguments是一个比较庞大的对象,非常耗资源

offsetleft、offsetTop、offsetParent的兼容性问题的更多相关文章

  1. js中offsetLeft,offsetTop,offsetParent计算边距方法

    封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetPare ...

  2. 1.offsetParent,offsetLeft,offsetTop

    offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

  4. offsetLeft, offsetTop以及postion().left , postion().top有神马区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  6. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  7. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  8. 一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  9. .offsetLeft,.offsetTop

    *{ margin:0; padding:0} div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; ...

随机推荐

  1. svn使用--all-static编译,移植到其它系统上可能使setlocale等GLIBC相关库函数调用失败

    svn: Can't convert string from 'UTF-8' to native encoding

  2. 解析json格式数据

    实现目标 读取文件中的json格式数据,一行为一条json格式数据.进行解析封装成实体类. 通过google的Gson对象解析json格式数据 我现在解析的json格式数据为: {",&qu ...

  3. 将u盘的文件复制到虚拟机上的linux系统上面—》文件挂载(文字+图解)

    虚拟机中操作系统.CentOs(无图形界面) 没有图形界面的linux,我也没有配置网络,现在需要把文件复制到linux系统上面,我这里就使用了u盘挂载的方式,获得了U盘中的文件. 1.VMware中 ...

  4. C#读写app.config中的数据

    C#读写app.config中的数据 读语句: String str = ConfigurationManager.AppSettings["DemoKey"]; 写语句: Con ...

  5. Hibernate中的inverse

    inverse inverse的英文意思是反向的,倒转的 Hibernate配置文件中的inverse正是这一真实反映,inverse属性只在Hibernate配置文件的集合元素上(list,set, ...

  6. 嵌入式Linux驱动学习之路(八)创建最小的根文件系统

    busybox 在配置busybox,在是否选择要静态链接库时,在静态下,busybox中的工具不需要动态链接库,能够直接运行.而用户自己编写的程序如果需要动态链接库,还是依然需要有. 如果是动态链接 ...

  7. kali开启ssh

    Kali 2.0安装之后需要做的事--使用SSH进行远程登录   2015年8月11日,Kali官方推出了新的kali系统2.0版本,此次升级最大的特点就是系统界面的设计理念更加先进,以及系统的升级方 ...

  8. 修复垂直滑动RecyclerView嵌套水平滑动RecyclerView水平滑动不灵敏问题

    在 Android 应用中,大部分情况下都会使用一个垂直滚动的 View 来显示内容(比如 ListView.RecyclerView 等).但是有时候你还希望垂直滚动的View 里面的内容可以水平滚 ...

  9. 为什么xcode7请求不成功

    1.现在有的工程因为升级xcode7不能进行请求数据,新特性要求App内访问的网络必须使用HTTPS协议.但是现在公司的项目使用的是HTTP协议,使用私有加密方式保证数据安全.现在也不能马上改成HTT ...

  10. 一类有依赖的树形背包dp方法

    失踪人口回归系列 这个标题是不是看起来很厉害呢233 给一道例题:有一个树,每一个节点代表一个物品,每个物品有重量和价值,每个物品必须先选父亲才能选自己.求给定重量内最大价值. 这题的思路十分的厉害. ...