根据距离浏览器边缘定位div(javascript)

根据距离浏览器边缘定位div(javascript)

在JavaScript中，可以使用offsetLeft和offsetTop属性来获取一个元素相对于其父元素的位置。要获取元素相对于浏览器边缘的位置，可以使用getBoundingClientRect()方法。

getBoundingClientRect()方法返回一个对象，其中包含元素的宽度、高度、左边缘和上边缘相对于视口的位置。视口是浏览器窗口或标签页的可见区域。

以下是一个示例代码，演示如何获取一个div元素相对于浏览器边缘的位置：

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
var left = rect.left;
var top = rect.top;

在这个示例中，我们首先通过getElementById()方法获取了一个div元素，然后使用getBoundingClientRect()方法获取了该元素的位置和尺寸信息。最后，我们将left和top属性的值分别赋给变量left和top，这些变量就是该元素相对于浏览器边缘的位置。

需要注意的是，getBoundingClientRect()方法返回的位置是相对于视口的，而不是相对于整个页面的。如果需要获取相对于整个页面的位置，可以使用以下代码：

var div = document.getElementById("myDiv");
var left = 0;
var top = 0;
while (div) {
  left += div.offsetLeft;
  top += div.offsetTop;
  div = div.offsetParent;
}

在这个示例中，我们使用了一个while循环来逐级累加每个元素的offsetLeft和offsetTop属性值，直到到达页面的根元素。最终，left和top变量就是该元素相对于整个页面的位置。