码迷,mamicode.com
首页 > 其他好文 > 详细

如何获取元素位置

时间:2018-06-24 14:07:47      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:alt   页面   获得   滚动条   turn   actual   tle   ack   body   

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

首先,每个元素都有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   }

 

如何获取元素位置

标签:alt   页面   获得   滚动条   turn   actual   tle   ack   body   

原文地址:https://www.cnblogs.com/2734156755z/p/9220323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!