在前端开发中，我们经常需要动态计算元素的高度或者监测元素的属性是否发生了变化。本文将介绍如何通过 JavaScript 来判断一个 div 元素是否改变了它的高度或 CSS 属性。
方法一：使用 getComputedStyle() 方法
getComputedStyle() 方法用于获取指定元素的所有最终使用的 CSS 属性值。我们可以在某个事件触发时调用该方法，然后比较前后两次获取到的高度或属性值是否相同来判断 div 是否改变了它的高度或 CSS 属性。
示例代码：
<div id="myDiv" style="width: 100px; height: 100px;"></div>
-- -------------------- ---- ------- ----- ----- - --------------------------------- -- ------------------ ----- --------- - -------------------------------------- ----- -------- - ------------------------------------- -- ----------------- ------------------ - -------- ----------------- - -------- ----- --------- - -------------------------------------- ----- -------- - ------------------------------------- -- ---------------- -- ---------- --- ---------- - ------------------ --------- - -- --------- --- --------- - ------------------ --------- -
方法二：使用 ResizeObserver API
ResizeObserver API 可以用来监听元素的大小变化。该 API 是异步的，当元素的尺寸发生改变时，会触发回调函数。我们可以在回调函数中对元素的高度或者其他属性进行判断。
示例代码：
<div id="myDiv" style="width: 100px; height: 100px;"></div>
-- -------------------- ---- -------
----- ----- - ---------------------------------
----- -------------- - --- ---------------------- -- -
--- ---- ----- -- -------- -
----- - ------ ------ - - ------------------
-- ------ --- --------- -
------------------ ---------
-
-- ------- --- ---------- -
------------------ ---------
-
-
---
-- ----------
------------------------------结论
上述两种方法都可以用来判断 div 元素是否改变了它的高度或 CSS 属性。使用 getComputedStyle() 方法比较适合在事件触发后立即判断；而使用 ResizeObserver API 则更适合长期监听元素大小变化。在实际应用中，我们需要根据具体需求来选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14816