在前端开发中，我们经常需要让用户可以调整页面上的元素大小，以便更好地适应不同的屏幕尺寸和布局。虽然有很多现成的库和框架可以轻松实现这一点，但是如果你想要更深入地理解如何实现元素调整大小功能，那么本文将向你介绍如何使用纯 JavaScript 实现。
HTML 元素大小调整的基本原理
在计算机图形学中，调整元素大小通常涉及到以下几个概念：
- 坐标系：用于表示元素在屏幕上的位置和大小。
- 事件处理器：用于接收和处理鼠标或触控设备上的用户输入事件。
- 尺寸调整算法：用于计算元素的新位置和大小，以反映用户的调整操作。
对于 HTML 元素而言，我们可以利用 DOM（文档对象模型）来访问并修改元素的属性，比如 offsetLeft、offsetTop、offsetWidth 和 offsetHeight。通过监听鼠标或触控设备的 mousedown、mousemove 和 mouseup 事件，我们可以获取用户的输入信息，并结合尺寸调整算法来计算元素的新位置和大小。
下面是一个简单的 HTML 示例代码，用于展示如何让一个 div 元素可调整大小：
--------- -----
----- ----------
------
----- --------------- --
---------------- ---------------
-------
---- -
--------- ---------
----- ------
---- ------
------ ------
------- ------
----------------- ----
-
-------- -
------ -----
------- -----
-------------- ----
----------------- ------
------- --- ----- ------
--------- ---------
-
--- -
------- --
------ --
------- ----------
-
--------
-------
------
---- ---------
---- -------------- ----------
------
------- ------------------------
-------
-------这个例子中有两个关键元素：一个是可调整大小的 div 元素，另一个是位于 div 元素右下角的小球，用于触发大小调整操作。这个小球被命名为“ resizer” 并设置了 cursor: se-resize 样式以表示它可以拖动。
整个实现过程
接下来我们将逐步介绍如何使用纯 JavaScript 实现上述功能。
第一步：获取 DOM 元素和计算初始状态
首先，我们需要获取到 div 元素和 resizer 元素，并计算出它们在屏幕上的坐标和初始大小。
----- --- - ------------------------------- ----- ------- - ----------------------------------- --- ---------- - ------ --- --------------- --------------- --- ----------------- ------------------
这里我们使用了几个变量来帮助我们处理大小调整操作：
isResizing：表示当前是否正在进行大小调整。originalMouseX和originalMouseY：记录鼠标或触控设备的初始位置，以计算用户输入的位移量。originalBoxWidth和originalBoxHeight：记录div元素的初始宽度和高度，以便于计算大小调整后的结果。
第二步：注册事件处理器
接下来，我们需要注册三个事件处理器：mousedown、
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26085