jQuery.position()方法獲取不到值的安全替換方法
更新時間：2015年03月13日 09:42:22 投稿：junjie
這篇文章主要介紹了jQuery.position()方法獲取不到值的安全替換方法,本文給出了一種變通的方法,用.offset()來換算,需要的朋友可以參考下
調用jQuery.position()方法會返回相對于父元素的位置，jQuery官方文檔中描述說，它跟.offset()方法不一樣，.offset()返回的是相對于document的位置，而.position()返回的是相對于父元素的位置。
但事實上，在使用的過程中，我們發(fā)現.position()返回的值經常是0。但事實不是0。尤其是谷歌瀏覽器和IE瀏覽器里。火狐瀏覽器沒有此問題。
究其原因，以基于Webkit的瀏覽器(谷歌瀏覽器和Safari瀏覽器)為例，只有當元素(圖片、flash等)完全加載后，瀏覽器才能訪問到這些元素的高度和寬度，而火狐瀏覽器是在DOM加載完成后就能訪問這些屬性，它不需要知道這個元素的完整尺寸。而谷歌瀏覽器就不行。因此在谷歌/IE這樣的瀏覽器里，如果你想使用.position()獲取元素的偏移量，往往得到值就是初始值:0。
有一種補救的方法是將你的.position()調用放到 $(window).load()事件觸發(fā)之后，而不是$(document).ready事件之后。但這種方法也未必可靠。
另外一種變通的方法是用.offset()來換算：
復制代碼 代碼如下:
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
這雖然產生了多余的代碼，但比較可靠的多，用的讓人放心。
相關文章
下面小編就為大家?guī)硪黄獙Quary選擇器的全面總結。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery實現高亮顯示網頁關鍵詞的方法,涉及jquery針對頁面字符串的遍歷與正則替換的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
懸停效果、延遲加載想必大家都有見到過吧，在本文將為大家介紹下是如何實現的，感興趣的朋友不要錯過2013-11-11
jQuery ajax serialize()方法的使用以及常見問題解決
使用ajax時，常常需要拼裝input數據為'name=abc&sex=1'這種形式，用JQuery的serialize方法可以輕松的完成這個工作接下來介紹jQuery ajax - serialize() 方法定義和用法，感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01
jQuery插件ajaxfileupload.js實現上傳文件
這篇文章主要為大家詳細介紹了jQuery插件ajaxfileupload.js實現上傳文件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
全屏淡入淡出簡潔banner，異步圖片文字效果切換圖片特效,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了jquery實現鼠標懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
最近做項目時碰到一個需求，就是在移動端支付頁面點擊支付按鈕彈出一個支付鍵盤，類似于支付寶的那種。項目只是單純的手機網站，所以這個功能由前端來實現，下面小編給大家?guī)砹薺Query仿移動端支付寶鍵盤的實現代碼，需要的朋友參考下吧2018-08-08
在jQuery庫中，幾乎所有的插件都被限制在它的命名空間里。全局的對象都很好地存儲在jQuery命名空間里，因此當把jQuery和其它javascript類庫一起使用時，不會引起沖突.2010-06-06
今天小編就為大家分享一篇解決jquery的ajax調取后端數據成功卻渲染失敗的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08