简单谈谈offsetleft、offsetTop和offsetParent


Posted in Javascript onDecember 04, 2020

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 相关文章推荐
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
JavaScript实现音乐播放器
Aug 14 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
原生JS实现拖拽效果
Dec 04 #Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
You might like
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
Python ZipFile模块详解
2013/11/01 Python
python实现文件名批量替换和内容替换
2014/03/20 Python
Python最长公共子串算法实例
2015/03/07 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL
JS高级程序设计之class继承重点详解
2022/07/07 Javascript