html获取当前x y值,HTML如何检索元素的位置(X,Y)？

getBoundingClientRect用于获取某个元素相对于视窗的位置，以像素为单位。

1、语法：rectObject=object.getBoundingClientRect();

注：这个方法没有参数。

2、返回值：

3、示例

下面通过示例来看看如何使用element.getBoundingClientRect()属性来检索元素的位置(X,Y)。

示例1：

元素位置

function getPositionXY(element) {

var rect = element.getBoundingClientRect();

document.getElementById('gfg').innerHTML =

'X: ' + rect.x + ', ' + 'Y: ' + rect.y

}

Button 1

Button 2

Button 3

效果图：

示例2：将指针移到文档上以获取元素的位置

元素位置

function getPositionXY(element) {

var rect = element.getBoundingClientRect();

document.getElementById('text').innerHTML

= 'X: ' + rect.x + '
' + 'Y: ' + rect.y;

}

将鼠标移到以下文本上

定位：

效果图：