offsetleft、offsetTop、offsetParent的兼容性问题
2016-03-11 08:38
513 查看
先来看看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没有把边框计算进去),下面是代码
Tips:代码中的this.left、this.top可以用arguments.callee代替,但根据ECMAScript 5规范不建议使用,strict model下已经被禁用,因为arguments是一个比较庞大的对象,非常耗资源
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是一个比较庞大的对象,非常耗资源
相关文章推荐
- Linux文件系统简介
- GIS+=地理信息+容器技术(4)——Docker运行
- centos6.5安装postgresql数据库和pgadmin客户端
- 股票买卖--openjudge
- linux 下载文件
- 结合linux命令讲解线上用hive拉取hbase数据
- HADOOP安装指南-Ubuntu15.10和hadoop2.7.2
- CPU 和内存虚拟化原理 - 每天5分钟玩转 OpenStack(6)
- CPU 和内存虚拟化原理 - 每天5分钟玩转 OpenStack(6)
- Sqoop 导入,导出练习
- 搭建linux服务器之Vim配置
- hadoop 排序
- 搭建linux服务器之Debian源相关
- Docker入门介绍
- Docker镜像加速器
- opacity与rgba
- Powershell管理系列(三十)PowerShell操作之统计邮箱的用户信息
- Powershell管理系列(三十)PowerShell操作之统计邮箱的用户信息
- 什么是shell
- 《学习opencv1.0》总结