javascript-detect-element-resize 是一个 npm 包，用于检测 HTML 元素的大小变化。它可以在前端开发中帮助我们实现一些动态交互效果，比如根据元素大小自适应调整布局。
安装和使用
首先，你需要在项目中安装该包：
npm install javascript-detect-element-resize --save
然后，在代码中引入：
import detectElementResize from 'javascript-detect-element-resize';
接下来，你可以通过以下代码监听元素大小的变化：
const element = document.getElementById('my-element');
detectElementResize(element, function () {
console.log('Element size changed');
});当元素大小变化时，回调函数将会被触发。
示例代码
下面是一个简单的示例代码，演示如何使用 javascript-detect-element-resize 实现根据窗口大小自适应调整布局的效果：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
---- -
------- --
-------- --
-
---------- -
------ -----
------- ------
-------- -----
---------------- -------
------------ -------
-
---- -
------ ----
------- ----
----------------- -----
----------- --- ---- ---------
-
--------
-------
------
---- ------------------
---- -------- ------------------
------
------- ------------------------------------------------------------------
--------
----- --- - -------------------------------
------------------------ -------- -- -
----- -------------- - ---------------------------
----- --------------- - ----------------------------
----- ------- - ------------------------ ---------------- - ----
--------------- - ---------------
---------------- - ---------------
---
---------
-------
-------在这个示例中，我们监听了 box 元素的大小变化，并根据其父元素的大小自动调整了 box 元素的宽度和高度，实现了自适应布局的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35999