HTML | DOM 区域坐标属性

HTML文档中的每个元素都有一个边界框来描述其实际大小和位置，而DOM区域坐标属性是用于获取和操作这些边界框的方法。

1. 元素的位置

一个HTML元素的位置是指该元素在页面中的准确坐标。它通常由以下值识别：

• x坐标 - 该元素左上角相对于左侧窗口边缘的距离
• y坐标 - 该元素左上角相对于顶部窗口边缘的距离
• 宽度 - 该元素的宽度
• 高度 - 该元素的高度

要获取这些值，可以使用元素的 offsetLeft，offsetTop，offsetWidth和 offsetHeight属性。例如：

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

console.log(elem.offsetLeft); // 100
console.log(elem.offsetTop); // 50
console.log(elem.offsetWidth); // 200
console.log(elem.offsetHeight); // 100

这将返回具有给定ID的元素的位置和尺寸。

2. 文档坐标

文档坐标是相对于文档而不是相对于浏览器窗口的坐标。可以使用 getBoundingClientRect()方法来获取文档坐标。

const rect = elem.getBoundingClientRect();

console.log(rect.top); // 50
console.log(rect.left); // 100
console.log(rect.width); // 200
console.log(rect.height); // 100

getBoundingClientRect()返回一个对象，该对象包含有关元素周围矩形的信息。

3.页面坐标

如果有滚动条，则文档和页面坐标将不同。需要添加滚动偏移量到文档坐标来获取页面坐标。

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

const rect = elem.getBoundingClientRect();
const top = rect.top + scrollTop;
const left = rect.left + scrollLeft;

console.log(top);
console.log(left);

在上面的代码中，我们首先计算了页面的滚动高度和宽度。接着，我们获取 getBoundingClientRect()方法返回的矩形，并将 scrollTop 和 scrollLeft 添加到 top 和 left 值中以获得页面坐标。

4.窗口坐标

如果需要将元素的坐标转换为相对于浏览器窗口的坐标，则需要使用 window.screenX 和 window.screenY 属性。例如：

const rect = elem.getBoundingClientRect();
const x = rect.left + window.screenX;
const y = rect.top + window.screenY;

console.log(x);
console.log(y);

在这个例子中，我们使用 getBoundingClientRect()和 window.screenX 和 window.screenY 属性来获取元素的窗口坐标。

结论

这里介绍了获取 HTML 元素区域坐标的四个值：文档坐标，页面坐标，窗口坐标和元素位置。使用上述方法可以轻松地获取这些坐标。