JavaScript 坐标系统详解
引言
在前端开发中，我们经常需要操作页面上的元素，设置它们的位置以及监听鼠标或触摸事件。而这些操作都离不开对坐标系统的理解和运用。
JavaScript 坐标系统是用来表示和定位页面上元素的位置的一种方式。在本文中，我们将深入了解 JavaScript 坐标系统的概念、属性和方法，并提供一些代码示例来演示其用法。
什么是坐标系统？
坐标系统是用来描述和定位空间中点的一种方式。在二维坐标系统中，我们使用两个数值来表示一个点的位置，分别对应水平方向的 x 值和垂直方向的 y 值。在三维坐标系统中，则需要使用三个数值来表示一个点的位置，分别对应 x、y 和 z 值。
在 JavaScript 中，我们主要使用二维坐标系统来定位页面上的元素。页面的左上角是坐标系统的原点，水平方向为 x 轴正向，垂直方向为 y 轴正向。坐标系统的单位是像素，即一个点的位置可以由一个 x 值和一个 y 值唯一确定。
属性和方法
window 对象的坐标属性
我们可以使用 window 对象提供的坐标属性来获取页面的尺寸和滚动位置，以便进行元素定位和布局。
-
window.innerWidth和window.innerHeight属性可以获取当前窗口的内部宽度和高度，不包括滚动条和边框的宽度。这两个属性可以用来设置元素的尺寸或计算元素的相对位置。 -
window.pageXOffset和window.pageYOffset属性可以获取页面的滚动位置。可以用来计算元素相对于可视区域左上角的位置。
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const scrollX = window.pageXOffset;
const scrollY = window.pageYOffset;
元素的坐标属性和方法
每个页面上的元素都有自己的坐标属性和方法，用于描述和操作元素的位置。
-
element.offsetLeft和element.offsetTop属性可以获取元素相对于其包含元素的左边缘和上边缘的偏移量。这两个属性可以用来计算元素相对于页面左上角的位置。 -
element.getBoundingClientRect()方法返回一个包含元素位置信息的DOMRect对象。该对象具有left、top、right和bottom四个属性，分别表示元素相对于视口左上角的位置。
const element = document.getElementById('myElement');
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;
const rect = element.getBoundingClientRect();
const rectLeft = rect.left;
const rectTop = rect.top;
坐标转换
有时我们需要在不同的坐标系之间进行转换，例如将相对于页面的坐标转换为相对于元素的坐标，或者反过来。
页面坐标转元素坐标
当我们知道一个元素相对于页面的坐标时，可以使用以下公式将其转换为相对于另一个元素的坐标：
const pageX = /* 元素相对于页面的 x 坐标 */;
const pageY = /* 元素相对于页面的 y 坐标 */;
const elementRect = element.getBoundingClientRect();
const elementX = pageX - elementRect.left;
const elementY = pageY - elementRect.top;
元素坐标转页面坐标
当我们知道一个元素相对于另一个元素的坐标时，可以使用以下公式将其转换为相对于页面的坐标：
const elementX = /* 元素相对于另一个元素的 x 坐标 */;
const elementY = /* 元素相对于另一个元素的 y 坐标 */;
const elementRect = element.getBoundingClientRect();
const pageX = elementX + elementRect.left;
const pageY = elementY + elementRect.top;
