在前端网页开发中，有时候需要检测元素的高度是否发生变化，以做出相应的调整。本文将介绍如何使用 jQuery 监听 div 元素高度的变化，并提供相关示例代码。
监听 div 的高度变化
要监听 div 的高度变化，我们可以使用 jQuery 提供的 height() 方法实现。该方法返回元素当前的像素高度值。我们可以通过定时器或者通过事件监听的方式，不断获取元素的高度值。当元素的高度发生变化时，就可以执行相应的操作了。
以下是通过定时器方式监听元素高度变化的代码：
--- ---- - ------------
--- ---------- - --------------
---------------------- -
--- ------ - --------------
-- ------- --- ----------- -
-- --------
------------------------
---------- - -------
-
-- -----上述代码首先选取了一个 ID 为 myDiv 的 div 元素，并使用变量 lastHeight 存储它的初始高度。然后周期性地在定时器中获取元素的高度值，与上一次获取的高度值进行比较。如果两个高度值不相等，说明元素的高度发生了变化，这时可以执行相应的操作。
除了定时器方式，我们还可以使用 jQuery 提供的事件监听机制，监听 resize 事件。当元素的高度发生变化时，该事件就会被触发。
以下是通过 resize 事件方式监听元素高度变化的代码：
--- ---- - ------------ ----------------- ---------- - -- -------- ------------------------ ---
上述代码选取了一个 ID 为 myDiv 的 div 元素，并在其上注册了 resize 事件的监听器。当元素的高度发生变化时，该事件就会被触发。
示例代码
下面的示例演示了如何使用 jQuery 监听 div 元素高度的变化，并在控制台打印出相应的提示信息。
--------- -----
------
------
----- ----------------
------------- -- --- --------------
------- ---------------------- ----------------------------------------------------------------------------
------- -----------------------
------------ -
--- ---- - ------------
--- ---------- - --------------
---------------------- -
--- ------ - --------------
-- ------- --- ----------- -
------------------------
---------- - -------
-
-- -----
-- ----------------- ---------- -
-- ------------------------
-- ---
---
---------
-------
------
---- ---------- -------------- ------ ----------------- ----------------
-------
-------在上述示例代码中，我们选取了一个 ID 为 myDiv 的 div 元素，并在其样式中设置了初始高度值。在页面加载后，我们通过定时器方式监听该元素的高度变化，并在控制台打印出相应的提示信息。你也可以取消注释掉的 $div.on('resize', ...) 代码，改为使用 resize 事件方式监听元素高度的变化。
总结
本文介绍了如何使用 jQuery 监听 div 元素高度的变化，并提供了相关示例代码。在实际开发过程中，我们可以根据具体需求选择定时器方式或者事件监听方式来实现元素高度的变化检
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9804