使用 HTML 检索元素的位置 (X,Y)

在 HTML 中，我们可以通过多种方式来检索元素的位置，其中包括其在文档中的位置，以及在页面中的屏幕位置。

检索元素在文档中的位置

我们可以使用 DOM API 中的方法来检索元素在文档中的位置。其中最常用的方法是 Element.getBoundingClientRect()，它会返回一个包含元素位置信息的 DOMRect 对象。

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();

console.log(`Left: ${rect.left}, Top: ${rect.top}, Right: ${rect.right}, Bottom: ${rect.bottom}`);

上述代码会输出元素在视口坐标系中的左上角和右下角的位置。

另外，我们可以使用 Element.scrollLeft 和 Element.scrollTop 获取元素在滚动容器中的偏移量。

const element = document.getElementById('my-element');

console.log(`ScrollLeft: ${element.scrollLeft}, ScrollTop: ${element.scrollTop}`);

检索元素在屏幕上的位置

要检索元素在屏幕上的位置，我们可以使用 Element.offsetLeft 和 Element.offsetTop 属性，它们分别表示元素在其包含元素中的左上角距离包含元素左上角的水平和垂直距离。

<style>
    #container {
        position: relative;
    }

    #my-element {
        position: absolute;
        left: 20px;
        top: 30px;
    }
</style>

<div id="container">
    <div id="my-element">Hello, world!</div>
</div>

<script>
    const element = document.getElementById('my-element');

    console.log(`Left: ${element.offsetLeft}, Top: ${element.offsetTop}`);
</script>

上述代码会输出 Left: 20, Top: 30，表示元素在其包含元素中的左上角距离包含元素左上角的水平和垂直距离。

此外，我们还可以使用 Window.scrollX 和 Window.scrollY 属性获取页面的滚动偏移量，从而计算出元素在屏幕上的位置。

const element = document.getElementById('my-element');

const screenX = element.offsetLeft - window.scrollX;
const screenY = element.offsetTop - window.scrollY;

console.log(`ScreenX: ${screenX}, ScreenY: ${screenY}`);

总结

在 HTML 中，我们可以通过 DOM API 来检索元素的位置信息，包括其在文档中的位置和在屏幕上的位置。DOMNode.getBoundingClientRect()方法可以检索元素在文档中的位置，该方法返回一个DOMRect对象。通过DOMNode.scrollLeft和DOMNode.scrollTop属性可以获取元素在滚动容器中的偏移量。通过DOMNode.offsetLeft和DOMNode.offsetTop属性可以检索元素在其包含元素中的左上角距离包含元素左上角的水平和垂直距离。通过Window.scrollX和Window.scrollY属性可以获取页面的滚动偏移量。