JavaScript动态监听DOM元素高度变化的实现方法

更新时间：2025年11月10日 09:54:57 作者：程序员大卫

在前端开发中,监听DOM元素的高度变化有时候是一个常见需求,尤其是在做响应式设计或需要根据内容变化调整布局时,所以本文给大家介绍了JavaScript动态监听DOM元素高度变化的两种实现方法,需要的朋友可以参考下

背景

在前端开发中，监听DOM元素的高度变化有时候是一个常见需求，尤其是在做响应式设计或需要根据内容变化调整布局时。常见的解决方案有两种，一种是使用现代浏览器支持的 ResizeObserver，另一种是通过兼容性更强的 iframe 技术来实现，适用于老款手机和IE浏览器。

1. ResizeObserver

ResizeObserver 是现代浏览器提供的一种监听元素尺寸变化的 API。它可以监听任意元素的大小变化，并在变化时触发回调函数，适合处理 DOM 元素高度变化的情况。

示例代码：

// 选择你想要监听的 DOM 元素
const targetElement = document.querySelector('.target');

// 创建 ResizeObserver 实例，并传入回调函数
const resizeObserver = new ResizeObserver(entries => {
    // entries 是一个包含被监听元素的数组
    entries.forEach(entry => {
        // 获取目标元素的当前高度
        const height = entry.contentRect.height;
        console.log('元素的当前高度:', height);
    });
});

// 开始监听目标元素的尺寸变化
resizeObserver.observe(targetElement);

使用说明：

ResizeObserver 会监听目标元素的大小变化，并返回一个 entries 数组，其中每一项代表一个被观察的元素。
entry.contentRect 是一个包含元素尺寸信息的矩形对象，height 属性即为元素的高度。
这个方法对于现代浏览器（Chrome、Firefox、Safari 等）都有效，支持程度较高。

2. Iframe

对于一些老款浏览器（如 IE 浏览器）或者需要兼容更多设备的情况，我们可以采用 iframe 技术来实现动态监听容器的高度变化。通过嵌入一个隐藏的 iframe 元素，可以监听 iframe 元素的 resize 事件来间接判断容器的高度。

示例代码（纯 HTML 实现）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态监听DOM元素高度变化 - iframe 示例</title>
    <style>
        .container {
            width: 100%;
            height: 200px; /* 初始高度 */
            position: relative;
            border: 1px solid #ccc;
        }
        .resize-iframe {
            width: 100%;
            height: 100%;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <iframe class="resize-iframe" src="about:blank"></iframe>
    </div>

    <script>
        const container = document.querySelector('.container');
        const iframe = document.querySelector('.resize-iframe');

        // 监听 iframe 的 resize 事件
        iframe.contentWindow.addEventListener('resize', function () {
            // 获取容器的当前高度
            console.log('容器的当前高度:', container.offsetHeight);
        });

        // 为了演示，在容器的高度变化时触发 resize 事件
        setInterval(() => {
            container.style.height = Math.random() * 500 + 'px';  // 随机调整容器高度
        }, 2000);  // 每2秒调整一次高度
    </script>
</body>
</html>

使用说明：

这个方法通过将一个隐藏的 iframe 嵌套到目标容器内，利用 iframe 的 resize 事件来检测容器的高度变化。
由于 iframe 的 resize 事件会在容器的尺寸发生变化时触发，因此我们可以在事件回调中获取容器的最新高度。
此方法的兼容性更广，可以支持老旧浏览器，如 IE 浏览器。

总结

通过这两种方法，我们可以动态监听 DOM 元素的高度变化，选择适合的方案可以保证跨浏览器和设备的兼容性。

到此这篇关于JavaScript动态监听DOM元素高度变化的实现方法的文章就介绍到这了,更多相关JS监听DOM元素高度变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layui的表单提交以及验证和修改弹框的实例
今天小编就为大家分享一篇layui的表单提交以及验证和修改弹框的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
深入探究使JavaScript动画流畅的一些方法
这篇文章主要介绍了使JavaScript动画流畅的一些方法,包括与CSS动画效果的一些对比,需要的朋友可以参考下
2015-06-06
一文详解JavaScript的事件监听(最新整理)
Web页面需要经常和用户之间进行交互,而交互的过程中我们可能想要捕捉这个交互的过程,比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置,下面介绍下JavaScript的事件监听,感兴趣的朋友一起看看吧
2024-01-01
uniapp微信小程序支付前端生成签名并调起微信支付全部代码
想要在uniapp中实现支付功能,通常需要使用第三方支付服务,如微信支付、支付宝支付,等这篇文章主要给大家介绍了关于uniapp微信小程序支付前端生成签名并调起微信支付的相关资料,需要的朋友可以参考下
2024-07-07
一文详解如何在uniapp中设置隐私政策弹窗
在将uniapp打包成APP端时,上架到应用市场的时候需要配置隐私弹窗,下面这篇文章主要给大家介绍了关于如何在uniapp中设置隐私政策弹窗的相关资料,需要的朋友可以参考下
2023-01-01
Js 订制自己的AlertBox(信息提示框)
这是一篇译文，实例分析制作自定义的信息提示框的实现代码
2009-01-01
微信小程序裁剪头像插件使用方法详解
这篇文章主要为大家详细介绍了微信小程序裁剪头像插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JS改变页面颜色源码分享
本篇文章是JS的一个网页制作小技巧，应用在很多地方，通过JS改变HTML页面的颜色，有兴趣的学习下。
2018-02-02
javascript实现框架高度随内容改变的方法
这篇文章主要介绍了javascript实现框架高度随内容改变的方法,实例分析了通过父页面及内容改变框架高度两种实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JavaScript中Promise的then()方法用例详解
在JavaScript中Promise是一种用于处理异步操作的编程模式,它代表了一个最终可能完成(解析)或失败(拒绝)的操作及其结果值,这篇文章主要给大家介绍了关于JavaScript中Promise的then()方法用例的相关资料,需要的朋友可以参考下
2025-07-07