JavaScript动态监听DOM元素高度变化的实现方法
作者：程序员大卫
在前端开发中,监听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元素高度变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！