jQuery

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

skyroxas1521

• 2 min read

前言：

當你是透過你所收尋的關鍵字找到這篇文章的同時，恭喜～你已經找到了答案的關鍵 ! 你需要藉由 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的效果，當然對於座標的應用絕不只於此，就等著大家來發揮與分享了～