简单谈谈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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
RequireJs的使用详解
Feb 19 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
自学python用什么系统好
2020/06/23 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
AJax面试题
2014/11/25 面试题
涨价通知
2015/04/23 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
高三毕业感言
2015/07/30 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
一文读懂navicat for mysql基础知识
2021/05/31 MySQL