JavaScript如何获取/计算页面元素的offset?
问题
通过点击一控件,在控件的下面显示一个浮动层,通常的做法是:获取此控件的offset值,再计算出浮动层的top,left等css属性的值,赋值即可。
那么下面就看一下如何获取控件的offset值。
纯JS的实现
首先想到的是这样的一段js。
document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;
发现需要添加值单位,那么就修改成下面这样子:
用IETester和FireFox再测试下,IE6+下都可以,如以前一样,写出的纯js的方法无情地被FireFox鄙视了,获取的值不正确。
网上再查了下,发现应该这样写,通过循环,层层向上计算,最后得到准确的offset值。
function getOffsetLeft(o) {var left=0;var offsetParent = o;while (offsetParent != null && offsetParent != document.body){left += offsetParent.offsetLeft;offsetParent = offsetParent.offsetParent;}return left; }
jQuery的实现
再细一步去查相关问题时发现jQuery中已经包含了实现此功能的函数:offset(),很好地兼容了各浏览器。
$("#Button").offset().left
还有一个函数是:position(),两者详细的对比分析在这里:深入剖析Jquery中的offset()和position()
下载源码后发现jQuery是这样实现的
jQuery.fn.extend({position: function() {if ( !this[0] ) {return null;}var elem = this[0],// Get *real* offsetParentoffsetParent = this.offsetParent(),// Get correct offsetsoffset = this.offset(),parentOffset = /^body|html$/i.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();// Subtract element margins// note: when an element has margin: auto the offsetLeft and marginLeft// are the same in Safari causing offset.left to incorrectly be 0offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0;offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0;// Add offsetParent bordersparentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0;parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0;// Subtract the two offsetsreturn {top: offset.top - parentOffset.top,left: offset.left - parentOffset.left};},offsetParent: function() {return this.map(function() {var offsetParent = this.offsetParent || document.body;while ( offsetParent && (!/^body|html$/i.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {offsetParent = offsetParent.offsetParent;}return offsetParent;});} });
计算方式大同小异,不过有一点需注意的是:
offset() 函数的计算 不包括margin值(但包含border值)
延伸阅读:
关于jQuery中的offset()和position()的用法
jQuery入门(2)使用jQuery操作元素的属性与样式
转载于:https://www.cnblogs.com/52php/p/5666389.html
JavaScript如何获取/计算页面元素的offset?相关推荐
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!...
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页 ...
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- jQuery子页面获取父页面元素
$("input[type='checkbox']:checked",window.opener.document);//适用于打开窗口的父页面元素获取 $("input ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"><div class="ce- ...
- js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
- html5 自动失去焦点,JavaScript onblur 事件:页面元素失去焦点
JavaScript onblur 事件 页面元素失去焦点时会触发 onblur 事件. 下面的例子验证用户输入的内容是否符合要求的11位手机号码: function checkMobile(inpu ...
- html不继承父级背景色,javascript – 如何获取从父元素继承的计算背景颜色样式...
你显然是想问 How do I find the background color for some element which is used by virtue of that color bei ...
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
网上很流行的方法,不用框架时: function getOffsetPosition(element){ var posTop = 0, posLeft = 0; do { posTop += ele ...
- iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! js 在父窗口中获取iframe中的元素 格式:window.frames["iframe的n ...
最新文章
- 最新版IntelliJ IDEA 15开发Java Maven项目
- FPGA的配置引脚以及配置过程
- windows codeblocks clang 3.7.0
- 面向对象程序设计_面向对象的程序设计(续)
- 三种复方门冬维甘滴眼液的抗菌能力比较
- ElasticSearch创建、修改、获取、删除、索引Indice mapping和Index Template案例
- 在Payara Server和GlassFish中配置密码
- php pdo 参数绑定,PDO预处理之参数绑定和列绑定
- [转载]Manually configuring Microsoft Internet Information Services (IIS)
- LINUX的一些简单命令 时间修改
- websocket 介绍及实现
- axios post object object_Vue前端开发——数据交互axios
- java阶乘实现_Java 实现阶乘算法
- BLP读书摘录和笔记——make
- 阅读笔记4:基于运动想象的脑机接口系统模式识别算法研究
- jmeter学习指南之生成html性能结果报告(篇幅较长谨慎阅读)
- 超参数优化:网格搜索法
- 计算机知识高级试题,计算机高级技能证试题目计算机操作员高级理论知识复习.doc...
- Nvidia AGX Xavier MAX9286 GMSL 载板(绿板)
- 十四年磨一剑,万能数据库查询分析器7.024版本 发布
热门文章
- linux脚本日期时间,Linux 日期和时间操作详解
- 《苏醒之路》制作人王鲲:独立游戏如何成功出海?
- 2021年度总结——做好事不留名·CSDN中的【雷锋】
- 1.8-1.10 大数据仓库的数据收集架构及监控日志目录日志数据,实时抽取之hdfs系统上...
- 快速解读linq语法
- Phython 3 笔记2 —— 基础语法
- python 压缩 解压
- 链接服务器 '(null)' 的 OLE DB 访问接口'STREAM' 返回了对列 '[!BulkInsert].field' 无效的数据...
- 里面有面和点_鲜虾韭菜水晶饺,皮薄馅大,晶莹剔透,一不小心就变成了面点高手...
- 用到f6的快捷键_RHINO快捷键这么多,GH电池组又太复杂怎么办?