如何获取元素位置

获取网页元素的绝对位置:

首先,每个元素都有offsetTopoffsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。

通过两个属性来实现元素定位:

 1  function getElementLeft(element){
 2     var actualLeft = element.offsetLeft;
 3     var current = element.offsetParent;
 4     while (current !== null){
 5       actualLeft += current.offsetLeft;
 6       current = current.offsetParent;
 7     }
 8     return actualLeft;
 9   }
10   function getElementTop(element){
11     var actualTop = element.offsetTop;
12     var current = element.offsetParent;
13     while (current !== null){
14       actualTop += current.offsetTop;
15       current = current.offsetParent;
16     }
17     return actualTop;
18   }

获取网页元素的相对位置:

有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动的距离就可以了。

滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。

 1  function getElementViewLeft(element){
 2     var actualLeft = element.offsetLeft;
 3     var current = element.offsetParent;
 4     while (current !== null){
 5       actualLeft += current.offsetLeft;
 6       current = current.offsetParent;
 7     }
 8     if (document.compatMode == "BackCompat"){
 9       var elementScrollLeft=document.body.scrollLeft;
10     } else {
11       var elementScrollLeft=document.documentElement.scrollLeft; 
12     }
13     return actualLeft-elementScrollLeft;
14   }
15   function getElementViewTop(element){
16     var actualTop = element.offsetTop;
17     var current = element.offsetParent;
18     while (current !== null){
19       actualTop += current. offsetTop;
20       current = current.offsetParent;
21     }
22      if (document.compatMode == "BackCompat"){
23       var elementScrollTop=document.body.scrollTop;
24     } else {
25       var elementScrollTop=document.documentElement.scrollTop; 
26     }
27     return actualTop-elementScrollTop;
28   }

 

posted @ 2018-06-24 13:09  文昭  阅读(1596)  评论(0编辑  收藏  举报