offset控件函数怎么插入控件

来源：蜘蛛抓取(WebSpider) 时间：2018-06-19 09:32 标签： offset函数
如何用JavaScript获取/计算页面元素的offset
互联网 & 发布时间： 15:29:19 & 作者：佚名 &
本篇文章小编将为大家介绍如何用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 =while (offsetParent != null && offsetParent != document.body){left += offsetParent.offsetLoffsetParent = offsetParent.offsetP}&/p&
jQuery的实现
再细一步去查相关问题时发现jQuery中已经包含了实现此功能的函数：offset()，很好地兼容了各浏览器。代码如下:$("#Button").offset().left后发现jQuery是这样实现的代码如下:jQuery.fn.extend({position: function() {if ( !this[0] ) {}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.while ( offsetParent && (!/^body|html$/i.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {offsetParent = offsetParent.offsetP}return offsetP});}});计算方式大同小异，不过有一点需注意的是：
offset() 函数的计算 不包括margin值（但包含border值）
大家感兴趣的内容
12345678910
最近更新的内容相关教程：
经典Excel学习视频及教程推荐：
Excel优秀工具推荐：
小工具推荐：

我要回帖

更多关于 offset函数 的文章

 

随机推荐