jQuery 取得 Dom 元素座標 - Offset() 與 Position()

前言:

當你是透過你所收尋的關鍵字找到這篇文章的同時,恭喜~你已經找到了答案的關鍵 ! 你需要藉由 Dom 元素 的 座標 來判斷說你指定的 Dom 元素 存在於畫面的哪個位置,來完成你開發上的應用。

  • 假設如上述所言~請放心繼續往下閱讀
  • 如果你只是剛好逛到~也可以繼續往下看 座標 在前台有許多的地方會被使用到~一定對你有幫助

一、調用方式:

1.取得目標 x 與 y 舳之座標:

程式碼:

$('element').Offset();

Google Chrome consoleLog 結果:

Object {top: 780, left: 30}

結果呈現出:

  • top:為指定元素的 y 軸的座標;
  • left:為指定元素的 x 軸的座標;

2.各別獲得目標 x 與 y 舳之座標:

程式碼:

$('.views-row-first').offset().top; // y軸

Google Chrome consoleLog 結果:

780 // y軸

程式碼:

$('.views-row-first').offset().left; // x軸

Google Chrome consoleLog 結果:

30 // x軸

二、Offset() 與 Position() 差異:

問題:

Offset() 與 Position() 兩者同樣都是 jQuery 用來抓取座標的函數,寫法也完全一樣!那是什麼情況來決定使用?

答案:

取決於 相對位置 的不同~

offset():

其只會以 整個document、body或是說整著網站作為相對位置來抓取元素座標

Position():

會以指定元素的層級開始往上尋找、找到第一個 Position 為 relative元素作為此元素的相對位置來抓取元素座標

結語:

元素座標常常在 scroll 事件時做引用,例如:當網站再做滾動時,能直接藉由座標判斷元素是否出現在畫面上,此來做元素 fadeIn fadeOut的效果,當然對於座標的應用絕不只於此,就等著大家來發揮與分享了~