如何获取元素位置

Posted 2020-11-20 2734156755z

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

首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（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 　　}