JavaScript中如何获取元素坐标(Position)

JavaScript获取元素位置

JavaScript可以用来获取元素的位置，位置包括元素的x，y坐标，以及宽度和高度。

获取元素位置的方法

JavaScript有两种方法可以获取元素的位置：

• 1. 使用getBoundingClientRect()方法，该方法返回一个对象，包含元素的位置，宽度和高度等信息。
• 2. 使用offsetTop和offsetLeft属性，该属性返回元素相对于其父元素的偏移量，即元素的x，y坐标。

使用getBoundingClientRect()方法

使用getBoundingClientRect()方法可以获取元素的位置，宽度和高度等信息，该方法返回一个对象，该对象有6个属性，分别是：

• top：元素上边缘距离页面顶部的距离；
• right：元素右边缘距离页面左边的距离；
• bottom：元素下边缘距离页面顶部的距离；
• left：元素左边缘距离页面左边的距离；
• width：元素宽度；
• height：元素高度。

// 获取元素位置
let rect = document.getElementById('element').getBoundingClientRect();
let x = rect.left;
let y = rect.top;
let width = rect.width;
let height = rect.height;

使用offsetTop和offsetLeft属性

使用offsetTop和offsetLeft属性可以获取元素相对于其父元素的偏移量，即元素的x，y坐标，该属性返回的是数值，不是对象。

// 获取元素位置
let x = document.getElementById('element').offsetLeft;
let y = document.getElementById('element').offsetTop;