jQuery.position()方法獲取值為0解決方案

admin發表於2017-04-01

關於此方法的基本用法這裡就不介紹了,具體用法可以參閱jQuery position()一章節。

下面介紹一下此方法的一個問題,那就是獲取的值總是出現零的情況。

在使用的過程中,發現position()返回的值經常是0。但事實不是0。尤其是谷歌瀏覽器和IE瀏覽器裡。火狐瀏覽器沒有此問題。

究其原因,以基於Webkit的瀏覽器(谷歌瀏覽器和Safari瀏覽器)為例,只有當元素(圖片、flash等)完全載入後,瀏覽器才能訪問到這些元素的高度和寬度,而火狐瀏覽器是在DOM載入完成後就能訪問這些屬性,它不需要知道這個元素的完整尺寸。而谷歌瀏覽器就不行。因此在谷歌/IE這樣的瀏覽器裡,如果你想使用.position()獲取元素的偏移量,往往得到值就是初始值:0。

有一種補救的方法是將你的.position()呼叫放到 $(window).load()事件觸發之後,而不是$(document).ready事件之後。但這種方法也未必可靠。

另外一種變通的方法是用.offset()來換算:

[JavaScript] 純文字檢視 複製程式碼
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
  };
};

相關文章