简单谈谈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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
js+canvas实现画板功能
Sep 13 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python-opencv颜色提取分割方法
2018/12/08 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
入党积极分子介绍信
2014/01/17 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle