如何獲取元素在頁面上的正確座標呢, 我想很多人都會想到 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座標。這裡我主要來講述後...