<think>嗯，用户现在问的是如何用
JavaScript监听div的
高度
变化。之前他们已经讨论过在
Vue项目中使用Element Plus表单时，动态调整表单
高度的解决方案，其中提到了ResizeObserver和iframe的方法。现在用户想更深入了解纯
JavaScript的方法，可能需要多种方案，并参考之前的讨论。
首先，用户之前的问题是关于表单
高度
变化时的CSS解决方案，其中提到了ResizeObserver和通过iframe的onresize事件的方法。现在用户明确想找
JavaScript监听div高度
变化的方法，所以需要整理几种常见的
JS方法，并考虑兼容性和实用性。
用户提供的站内引用提到了两种方法：使用iframe的resize事件和MutationObserver。需要将这些方法整合进去，同时补充其他可能的方法，比如轮询检测或者ResizeObserver，但ResizeObserver已经在之前的回答中提过，可能用户现在想更详细地了解其他方法。
需要确保回答的结构清晰，分点列出每种方法，包括原理、实现代码、优缺点，以及注意事项。用户可能关心不同方法的兼容性，比如ResizeObserver的浏览器支持情况，或者MutationObserver的使用限制。此外，用户提到iframe的方法，需要详细解释其原理，并给出代码示例。
可能还要比较不同方法的适用场景，比如轮询简单但性能差，ResizeObserver现代但需要polyfill，MutationObserver适合DOM结构
变化的情况。用户可能在实际项目中需要选择最适合他们需求的方法，因此需要给出每种方法的优缺点。
另外，用户之前的问题中提到了异步加载图片导致
高度
变化的情况，所以在解释方法时要考虑到这种情况，比如图片加载完成后触发
高度
变化，如何正确
监听。可能需要提到在图片加载完成后触发检查，或者在MutationObserver中处理子元素的
变化。
最后，相关问题部分需要引导用户深入，比如如何优化性能，处理兼容性，或者结合框架使用。确保回答覆盖用户可能需要的后续问题，帮助他们进一步解决问题。</think>在
JavaScript中
监听div高度
变化主要有以下5种实现方案，根据使用场景选择最合适的方法：
### 一、ResizeObserver API（现代浏览器推荐）
```
javascript
const target
Div = document
.querySelector(&#
39;
.box&#
39;);
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const height = entry
.contentRect
.height;
console
.log(&#
39;
高度
变化:&#
39;, height);
// 执行业务逻辑
}
});
observer
.observe(target
Div);
// 停止
监听
// observer
.disconnect();
```
**原理**：
通过浏览器原生API
监听元素尺寸
变化，支持动态内容、CSS动画、窗口缩放等场景[^1]
**特点**：
✅ 性能最佳（浏览器原生支持）
✅ 精确到像素级
变化
⚠️ 需要polyfill支持IE（resize-observer-polyfill）
---
### 二、iframe代理方案（兼容性最佳）
```html
<
div class="box">
<iframe style="height:100%; width:0; border:0; position:absolute; opacity:0;"></iframe>
<!-- 实际内容 -->
</
div>
```
```
javascript
const box = document
.querySelector(&#
39;
.box&#
39;);
const iframe = box
.querySelector(&#
39;iframe&#
39;);
iframe
.contentWindow
.onresize = () => {
console
.log(&#
39;新
高度:&#
39;, box
.offsetHeight);
// 执行回调逻辑
};
```
**实现原理**：
利用iframe与其父容器
高度联动的特性，通过
监听iframe窗口的resize事件间接检测父容器
高度
变化[^2]
**优势**：
✅ 兼容所有主流浏览器（包括IE9+）
✅ 不依赖任何第三方库
---
### 三、MutationObserver检测（DOM结构
变化时）
```
javascript
const observer = new MutationObserver(mutations => {
console
.log(&#
39;当前
高度:&#
39;, target
Div.offsetHeight);
});
observer
.observe(target
Div, {
attributes: true, //
监听属性
变化
childList: true, //
监听子节点
变化
subtree: true, //
监听所有后代节点
characterData: true //
监听文本内容
变化
});
```
**适用场景**：
当
高度
变化由以下原因引起时：
- 子元素增删/内容
变化
- 元素样式属性
变化
- 文本内容改变
---
### 四、轮询检测（兼容旧浏览器的保底方案）
```
javascript
let lastHeight = 0;
function checkHeight() {
const currentHeight = target
Div.offsetHeight;
if (currentHeight !== lastHeight) {
console
.log(&#
39;
高度
变化:&#
39;, currentHeight);
lastHeight = currentHeight;
}
requestAnimationFrame(checkHeight);
}
checkHeight();
```
**优化技巧**：
1
. 使用`requestAnimationFrame`代替`setInterval`提升性能
2
. 添加阈值检测避免微小波动：
```
javascript
if (Math
.abs(currentHeight - lastHeight) > 2) { /*
...*/ }
```
---
### 五、CSS动画事件
监听（特定场景使用）
```css
.box {
animation: heightMonitor 1s infinite;
}
@keyframes heightMonitor {
from { opacity: 0
.99; }
to { opacity: 1; }
}
```
```
javascript
target
Div.addEventListener(&#
39;animationiteration&#
39;, () => {
console
.log(&#
39;当前
高度:&#
39;, target
Div.offsetHeight);
});
```
**原理**：
通过持续触发的CSS动画间接检测布局
变化
---
### 综合方案选择建议
| 方案 | 实时性 | 性能消耗 | 兼容性 | 实现复杂度 |
|--------------------|--------|----------|--------------|------------|
| ResizeObserver | ★★★★★ | ★★☆☆☆ | 现代浏览器 | 简单 |
| iframe代理 | ★★★★☆ | ★★★☆☆ | 全兼容 | 中等 |
| MutationObserver | ★★★☆☆ | ★★★★☆ | IE11+ | 复杂 |
| 轮询检测 | ★★☆☆☆ | ★☆☆☆☆ | 全兼容 | 简单 |
| CSS动画事件 | ★★☆☆☆ | ★★★★☆ | 部分旧浏览器 | 中等 |
**特殊场景处理**：
1
. **图片异步加载**：在`<img>`标签上添加`onload`事件
```
javascript
images
.forEach(img => {
img
.onload = () => console
.log(&#
39;图片加载完成，当前
高度:&#
39;,
div.offsetHeight);
});
```
2
. **过渡动画期间**：配合`transitionend`事件
```
javascript
target
Div.addEventListener(&#
39;transitionend&#
39;, () => {
console
.log(&#
39;过渡结束
高度:&#
39;, target
Div.offsetHeight);
});
```
: ResizeObserver是现代浏览器
监听元素尺寸
变化的首选API
[^2]: iframe方案通过代理窗口事件实现跨浏览器兼容
最低0.47元/天 解锁文章
扫一扫
1万+
到【灌水乐园】发言
