首頁 > web前端 > js教程 > javascript 精确获取页面元素的位置_javascript技巧

javascript 精确获取页面元素的位置_javascript技巧

WBOY
發布: 2016-05-16 18:37:17
原創
962 人瀏覽過
复制代码 代码如下:

//取得元素x坐标
function pageX(elem) {
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//取得元素y坐标
function pageY(elem) {
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

貌似这位大神在出这本书时比较赶,有许多纰漏,最后大神也发觉这两个函数有问题,并没有把它们运用到JQuery中。由于是用累加的方式去计算,只要一个元素出现问题,就有可能层层被大,因此我在精确获取样式属性时就摒弃这种方法。主要误算参照大神的结论
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
Miscalculation of absolutely positioned elements.
javascript 精确获取页面元素的位置_javascript技巧

随着新锐浏览器都支持IE的getBoundingClientRect方法,我们得以用更简单更快捷更安全的方法来定位页面元素。getBoundingClientRect返回的是一个集合,分别为元素在浏览器可视区的四个角的坐标。

不过它在IE的标准模式存在一个奇怪的问题,html元素是有border的,默认是2px,并且是不可修改的;怪癖模式是没有的。详见http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

我们做一些测试(请分别在IE6与IE8中进行):

1、标准模式,没有重设html的border

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板