在過去,類似下面的程式碼很常被用在取得元素位置 function findPos ( obj ) { var left , top ; left = top = 0 ; if ( obj . offsetParent ) { do { left += obj . offsetLeft ; top += obj . offsetTop ; } while ( obj = obj . offsetParent ) ; } return { x : left , y : top , } ; } ; objPos = findPos ( document . getElementById ( 'test' ) ) ; alert ( "x:" + objPos . x + " | y:" + objPos . y ) ; offsetParent會回傳距離傳入物件最近 的容器 這個屬性會依傳入物件及其父元素是否有設定 postion屬性(absolute、relative)變動 一般沒有指定定位的情形下,最外層的offsetParent就是document.body 這個方法的成本偏大,特別是若需進行較多次迴圈運算時 使用時將結果儲存為 local 變數會是比較好的處理作法 既然說了在過去,表示這個做法一定有那裡不夠好 除了上述提過會使用較多的資源來進行計算外 offsetParent也有可能有相容性的疑慮,而卷軸捲動的scrollTop、scrollLeft也會被計算進來 通常我們需要的只是單純的計算元素距離瀏覽器視窗的相對位置 現在該用的作法是 element.getBoundingClientRect(); 這個方法會回傳一個物件,物件成員有元素的 left、top、right、bottom、width、height數值 因為這個方法過去是IE獨有,而現在 firefox 和 chrome 也都有支援,所以也不必擔心相容性