獲取元素在文件上的正確座標

2022-02-26 15:43:07 字數 869 閱讀 2124

如何獲取元素在頁面上的正確座標呢, 我想很多人都會想到  elem.getboundingclientrect 和 window.scrolltop / window.scrollleft 的求和,實際上這種方法在大部分情況下的確是正確的, 但是在 ie6 ie7 中卻並不正確, top 和 left 會比實際的值各多出 2px。

這個2px 並不是 html 和 body 的 預設 border 造成的, 這是瀏覽器的容器邊框寬度。

就是下圖中紅框部分

這個值如何去獲得呢?

先在 css reset 中 加入 html /* 相容各瀏覽器的 html margin 呈現不統一 */

然後,可以使用 (document.documentelement || document.getelementsbytagname('html')[0]).getboundingclientrect() 去獲得

不過, 經過測試,**在 ie 67 下可以獲得 2 這個值,  ie6 為 0,  ie7 為2, 而 ie 8 卻是 -2, 其他瀏覽器均為 0

看來 ms 在 ie7除了 html 外加上 2, 在ie8 的時候 getboundingclientrect 函式是通過內建 -2 的值的方式來修復的, 而 ie9 才真正修復了

因此,這裡還需要對該函式做 ie8 的相容,加上部分其他問題的相容,於是有了以下**

//元素在文件上的座標 v0.4 alucelx

//function pagexy(elem);

return ;

}

使用時,傳入要查詢的元素 即可返回正確的位置

獲取html元素的座標

獲取相對於頁面的座標 x e.offsetleft p e.offsetparent while p do x x p.offsetleft p p.offsetparent end return x y e.offsettop p e.offsetparent while p do y y p.o...

獲取元素的精確座標

var getcoords function el function getwindow el function iswindow obj 總結一下下 b size large window.pageyoffset size b 非ie的東東,和ie的document.body.scrolltop很...

獲取Dom元素的X Y座標

現在web頁面的互動方式越來越多樣化,其中拖放頁面元素也是一種很常見的操作。在這類操作當中有兩個主要問題需要解決,乙個是事件的註冊方式,一般處理拖放元素的事件順序是 捕獲滑鼠正鍵按下 註冊滑鼠移動事件 捕獲滑鼠正鍵抬起 登出滑鼠移動事件 另乙個問題就是拖放元素的位置,即x y座標。這裡我主要來講述後...