jquery中 offset()计算的偏移量 和 原生Dom计算的偏移量不一致;

news2024/10/7 12:21:43

目录

一、问题

二、原因及解决方法

三、总结


一、问题

1.需求:有一个表格,单元格宽度不相等,单元格上面覆盖着一个input输入框。想要通过相对位置计算 输入框到底在表格的第几列

思路:通过循环表格第一行单元格计算左边偏移量,直到累加的左偏移量大于或等于 输入框的左偏移量,此时的单元格所在的列即 输入框在表格的列

算了半天,发现怎么算都不对。打印发现:我用offset().left计算的第一行第一个单元格的左边偏移量竟然有580px,相对外面的div明显不正确呀,看着就还没有100px;用offsetLeft计算输入框的左偏移量。

二、原因及解决方法

1.原因offset()计算的偏移量竟然是 相对于 浏览器文档的距离(body) !!!!!真是难以置信,因为原生DOM也有计算偏移量的属性 offsetLeft,取得是相对最近的有定位的父元素到当前元素的距离。

我的外层div有定位,所以offsetLeft计算时是相对于外层div的;而单元格的左偏移量计算是相对于

body的;这两个值根本就无法比较,根本就不可能计算出输入框在表格的第几列。

2.解决方法jquery中提供了 position().left 方法取相对偏移量,结果和offsetLeft计算结果一致。

三、总结

1.在通过偏移量计算位置时:尽量统一使用jquery方法  或  原生DOM计算方式不要混合使用,因为有些方法看着是相似的,其实他们的含义是不一样的。如上面的offset().left和offsetLeft理所当然的认为他们一样,结果根本不一样。

2.offset().left是相对于body的偏移量

3.offsetLeft===position().left  都是相对于有定位的父元素的偏移,当父元素都没有定位时,才是相对于body的偏移量。

/*

感谢wxy的帮助!

希望对你有帮助!

如有错误,欢迎指正!

*/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/27938.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Twitter群推王:推特全方位营销利器

Twitter群推王是专为Twitter运营提供的一款全方位营销工具,可以自动发帖、自动私信、自动转发、自动关注、自动点赞、自动改资料、自动注册、数据采集等,解决营销中的三大难题:账号问题、同一Ip环境问题、批量自动化问题,是个人、…

【数据结构Note4】-串、数组和广义表(kmp算法详解)

串、数组和广义表 顺序表和链表分别是线性表的两种存储结构。 栈和队列是操作受限的线性表。 串、数组和广义表是内容受限的线性表。 1. 串 1.1 串的概念和结构 串(String)—零个或多个任意字符组成的有限序列 所谓串是内容受限的线性表。就是要求该线性…

[ 常用工具篇 ] 解决kali英文操作不方便的问题 -- kali 设置中文界面

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

iNFTnews|FTX一夜崩塌,但Web3仍前途光明

元宇宙的日子越来越不好过了。 FTX的暴雷仍在产生广泛的影响,以太坊的价格快跌到1000美元了,这与去年11月4900美元的历史新高形成鲜明对比。 不过,尽管市场低迷,创作者仍然在Web3领域找到了爱与支持,甚至是可持续发展…

正则表达式快速入门

目录1.正则表达式是什么,有什么作用2.定位符例子2.1想要搜索以“001”开头的文件2.2想要搜索以“ab”结尾的文件2.3搜索单词开头为“zh"的文件2.4搜索单词结尾为“zh"的文件2.5搜索单词中间为“zh"的文件3.限定符例子3.1 搜索以“0”开头&#xff0c…

【Call for papers】DSN-2023(CCF-B/软件工程/2022年12月7日截稿)

文章目录1.会议信息2.时间节点3.论文主题On behalf of the Organizing Committee, we extend you a warm welcome to the 53rd Annual IEEE/IFIP International Conference on Dependable Systems and Networks (DSN 2023), organized by the University of Coimbra, Portugal.…

MyBatis-Plus 联表查询

文章目录前言引入依赖数据准备修改 Mapper查询分页查询前言 它的联表查询能力一直被大家所诟病。一旦遇到 left join 或 right join 的左右连接,你还是得老老实实的打开 xml 文件,手写上一大段的 sql 语句。 直到前几天,偶然碰到了这么一款…

麻了,3个offer不知道选哪个?

有的小伙伴苦于没offer,有的小伙伴苦于offer多,不知道选择哪个? 本科双非,硕士末端985,拿到了三个offer,过来问小孟去哪? 一,拿到三个不错的offer: 三个offer分别是阿里…

JDK8新特性之Stream流

目录 集合处理数据的弊端 Stream流的获取方式 对于Collection的实现类 对于Map 对于数组 Stream常用方法介绍 count forEach filter limit skip map sorted distinct match find max和min reduce mapToInt concat Stream结果收集 结果收集到集合中 结果收…

分布式定时调度-xxl-job

分布式定时调度-xxl-job 一.定时任务概述 1.定时任务认识 1.1.什么是定时任务 定时任务是按照指定时间周期运行任务。使用场景为在某个固定时间点执行,或者周期性的去执行某个任务,比如:每天晚上24点做数据汇总,定时发送短信等。 …

Android中Adapter的作用

Adapter的介绍 An Adapter object acts as a bridge between an AdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making aView for each item in the data set. 一个Adapter是Ada…

关于 SAP Cloud Connector 500 failed to sign the Certificate 的错误消息

有朋友向我询问一个关于 SAP Cloud Connector 的问题,错误消息如下: 500 failed to sign the Cloud Connector Certificate for subaccount XXX. Verify Configuration and proxy settings. See Log And Trace Files and in particular ljs_trace.log fo…

基于Java+SpringBoot+Mybatis+Vue+ElementUi的校园闲置物品交易

项目介绍 我们通过java语言,后端springboot框架,数据库mysql,前端vue技术,开发本系统,校园闲置物品交易网站系统中的功能模块主要是实现管理员;首页、个人中心、用户管理、商品类型管理、商品信息管理、系…

什么是固话号码认证?固话号码认证有用吗?

固话号码认证提供企业号码认证服务,来电场景中展现企业LOGO,展现品牌,可以查看更多企业相关信息,可有效提高接通率,保证品牌企业的身份及商业价值。 那如何实施号码认证服务呢?接下来小编就给大家整理了号…

ICML-2022 | 强化学习论文清单(附链接)

第39届国际机器学习会议(International Conference on Machine Learning, ICML 2022)于北京时间7月17日至7月23日,在美国马里兰州巴尔的摩市以线上线下结合的方式举办。 本文列举了会议主题与强化学习(Reinforcement Learning, R…

20行Python代码,轻轻松松获取各路书本,你还在花钱买着看嘛~

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 作为现代青年,我相信应该没几个没看过xiao shuo的吧,嘿嘿~ 一般来说咱们书荒的时候怎么办? 自然是去寻一个网站先找到xiao shuo名字,然后再找度娘…

高压功率放大器原理和应用场合介绍

高压功率放大器是用来对(脉冲发生器、函数发生器以及波形发生器等)信号进行电压、电流或者功率放大,能够给测试负载提供信号驱动的测量仪器。独立的波形功率放大器分为电压放大器、电流放大器以及电压/电流放大器。另外,还有一类被…

Spring的常用拓展点

文章目录自定义拦截器获取 Spring 容器对象修改 BeanDefinition添加BeanDefinition测试初始化 Bean 前后初始化方法使用PostConstruct 注解实现 InitializingBean 接口BeanFactoryPostProcessor 接口关闭容器前自定义作用域自定义拦截器 spring mvc 拦截器的顶层接口是&#x…

web端常见导航设计

一、导航的定义 导航作为网站或者平台的骨架,是产品设计中不容忽视的一环导航是内容或者功能的定位、导向与通道。 二、导航分类 遵循导航层级结构,包括全局导航和局部导航 全局导航往往指页眉和页脚,存在于网站的大部分页面,便于…

游戏引擎概述-Part1

一、简述自己的学习心路历程 自从业UNITY以来已经有4个月多了,回想起来自己从工作以来就很少写博客了,也算督促一下自己,回想自己从最早的Unity开始,入手C#和编辑器、Unity开发界面,再到自己学一些Unity的小项目…