JS 中 offset、client、scroll 距离属性以及获取鼠标坐标总结

前端

2023-09-04 16:36:01

掌握 JavaScript 距离属性：精准定位元素和交互

在现代网页开发中，准确操作和放置页面元素至关重要。JavaScript 提供了一系列强大的距离属性，使我们能够精确地定位元素，从而增强交互式应用程序并提升用户体验。

1. Offset 距离属性

Offset 属性衡量元素相对于其最近具有定位属性（例如绝对或相对）的祖先元素的偏移量。

offsetLeft: 元素相对于其祖先元素左边缘的水平偏移量。
offsetTop: 元素相对于其祖先元素上边缘的垂直偏移量。
offsetWidth: 元素的宽度，包括填充和边框，但不包括外边距。
offsetHeight: 元素的高度，包括填充和边框，但不包括外边距。

2. Client 距离属性

Client 属性返回元素相对于其边界框左上角的偏移量。

clientLeft: 元素相对于其边界框左上角的水平偏移量。
clientTop: 元素相对于其边界框左上角的垂直偏移量。
clientWidth: 元素的宽度，包括填充和边框。
clientHeight: 元素的高度，包括填充和边框。

3. Scroll 距离属性

Scroll 属性衡量元素相对于其滚动条位置的偏移量。

scrollLeft: 元素相对于其滚动条左边缘的水平偏移量。
scrollTop: 元素相对于其滚动条上边缘的垂直偏移量。

4. 获取鼠标坐标

clientX 和 clientY 属性返回鼠标相对于当前视口左上角的坐标。这些属性对于在鼠标移动或单击事件中实现交互性至关重要。

示例：运用距离属性

// 获取元素的 offset 偏移量
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;

// 获取元素的 client 偏移量
const clientLeft = element.clientLeft;
const clientTop = element.clientTop;

// 获取元素的 scroll 偏移量
const scrollLeft = element.scrollLeft;
const scrollTop = element.scrollTop;

// 获取鼠标坐标
document.addEventListener("mousemove", (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
});