問題?

通過點擊一控件，在控件的下面顯示一個浮動層，通常的做法是：獲取此控件的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？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。