开发 Web 应用程序时，出于各种目的可能需要获取页面上 HTML 元素的 X 和 Y 位置，例如相对于目标元素定位其他元素或根据元素的位置触发事件。在本文中，我们将探讨如何在 JavaScript 和 jQuery 中获取 HTML 元素的 X 和 Y 位置。
在 JavaScript 中获取 X 和 Y 位置
要在 JavaScript 中获取 HTML 元素的 X 和 Y 位置，我们可以使用该getBoundingClientRect()方法。此方法返回一个对象，其属性描述元素相对于视口的位置。
下面是如何使用 JavaScript 获取 ID 为“myElement”的元素的 X 和 Y 位置的示例：
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + window.scrollY;在此示例中，我们首先使用 获取对元素的引用getElementById()。然后，我们调用getBoundingClientRect()元素上的方法，该方法返回一个具有left、top、right和 等属性的对象bottom。和属性描述元素相对于视口的 X 和 Y 位置left。top
请注意，返回的left和属性是相对于视口的左上角，而不是文档的左上角。要获取元素的绝对位置，我们需要分别使用和 将窗口的当前滚动位置添加到和值中。topgetBoundingClientRect()lefttopwindow.scrollXwindow.scrollY
在 jQuery 中获取 X 和 Y 位置
在 jQuery 中，我们可以使用该offset()方法来获取 HTML 元素的 X 和 Y 位置。此方法返回一个对象，该对象具有描述元素相对于文档的位置的属性。
下面是如何使用 jQuery 获取 ID 为“myElement”的元素的 X 和 Y 位置的示例：
const element = $('#myElement');
const x = element.offset().left;
const y = element.offset().top;在此示例中，我们首先使用 jQuery 选择器获取对元素的引用$('#myElement')。然后，我们调用offset()元素上的方法，该方法返回一个具有left和 等属性的对象top。和属性描述元素相对于文档的 X 和 Y 位置left。top
请注意，该offset()方法返回元素相对于文档的位置，而不是视口。如果要获取元素相对于视口的位置，可以分别使用$(window).scrollLeft()和减去窗口的当前滚动位置$(window).scrollTop()。这是一个例子：
const element = $('#myElement');
const offset = element.offset();
const x = offset.left - $(window).scrollLeft();
const y = offset.top - $(window).scrollTop();与前面的示例一样，我们首先使用 jQuery 选择器获取对元素的引用$('#myElement')，然后调用offset()元素上的方法，该方法返回一个具有 left 和 top 等属性的对象。left 和 top 属性描述元素相对于文档的 X 和 Y 位置。
为了获得元素相对于视口的位置，我们分别使用$(window).scrollLeft()和减去窗口的当前滚动位置$(window).scrollTop()。这为我们提供了元素相对于视口的 X 和 Y 位置。
请注意，scrollLeft()和scrollTop()方法分别返回文档当前从左边缘和上边缘滚动的像素数。从元素的偏移量中减去这些值就可以得到它相对于视口的位置。
