JavaScript動態(tài)監(jiān)聽DOM元素高度變化的實現(xiàn)方法
更新時間：2025年11月10日 09:54:57 作者：程序員大衛(wèi)
在前端開發(fā)中,監(jiān)聽DOM元素的高度變化有時候是一個常見需求,尤其是在做響應式設計或需要根據(jù)內容變化調整布局時,所以本文給大家介紹了JavaScript動態(tài)監(jiān)聽DOM元素高度變化的兩種實現(xiàn)方法,需要的朋友可以參考下
背景
在前端開發(fā)中，監(jiān)聽DOM元素的高度變化有時候是一個常見需求，尤其是在做響應式設計或需要根據(jù)內容變化調整布局時。常見的解決方案有兩種，一種是使用現(xiàn)代瀏覽器支持的 ResizeObserver，另一種是通過兼容性更強的 iframe 技術來實現(xiàn)，適用于老款手機和IE瀏覽器。
1. ResizeObserver
ResizeObserver 是現(xiàn)代瀏覽器提供的一種監(jiān)聽元素尺寸變化的 API。它可以監(jiān)聽任意元素的大小變化，并在變化時觸發(fā)回調函數(shù)，適合處理 DOM 元素高度變化的情況。
示例代碼：
// 選擇你想要監(jiān)聽的 DOM 元素
const targetElement = document.querySelector('.target');
// 創(chuàng)建 ResizeObserver 實例，并傳入回調函數(shù)
const resizeObserver = new ResizeObserver(entries => {
// entries 是一個包含被監(jiān)聽元素的數(shù)組
entries.forEach(entry => {
// 獲取目標元素的當前高度
const height = entry.contentRect.height;
console.log('元素的當前高度:', height);
});
});
// 開始監(jiān)聽目標元素的尺寸變化
resizeObserver.observe(targetElement);
使用說明：
ResizeObserver會監(jiān)聽目標元素的大小變化，并返回一個entries數(shù)組，其中每一項代表一個被觀察的元素。entry.contentRect是一個包含元素尺寸信息的矩形對象，height屬性即為元素的高度。- 這個方法對于現(xiàn)代瀏覽器（Chrome、Firefox、Safari 等）都有效，支持程度較高。
2. Iframe
對于一些老款瀏覽器（如 IE 瀏覽器）或者需要兼容更多設備的情況，我們可以采用 iframe 技術來實現(xiàn)動態(tài)監(jiān)聽容器的高度變化。通過嵌入一個隱藏的 iframe 元素，可以監(jiān)聽 iframe 元素的 resize 事件來間接判斷容器的高度。
示例代碼（純 HTML 實現(xiàn)）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態(tài)監(jiān)聽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');
// 監(jiān)聽 iframe 的 resize 事件
iframe.contentWindow.addEventListener('resize', function () {
// 獲取容器的當前高度
console.log('容器的當前高度:', container.offsetHeight);
});
// 為了演示，在容器的高度變化時觸發(fā) resize 事件
setInterval(() => {
container.style.height = Math.random() * 500 + 'px'; // 隨機調整容器高度
}, 2000); // 每2秒調整一次高度
</script>
</body>
</html>
使用說明：
- 這個方法通過將一個隱藏的 iframe 嵌套到目標容器內，利用 iframe 的
resize事件來檢測容器的高度變化。 - 由于
iframe的resize事件會在容器的尺寸發(fā)生變化時觸發(fā)，因此我們可以在事件回調中獲取容器的最新高度。 - 此方法的兼容性更廣，可以支持老舊瀏覽器，如 IE 瀏覽器。
總結
通過這兩種方法，我們可以動態(tài)監(jiān)聽 DOM 元素的高度變化，選擇適合的方案可以保證跨瀏覽器和設備的兼容性。
到此這篇關于JavaScript動態(tài)監(jiān)聽DOM元素高度變化的實現(xiàn)方法的文章就介紹到這了,更多相關JS監(jiān)聽DOM元素高度變化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇layui的表單提交以及驗證和修改彈框的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了使JavaScript動畫流暢的一些方法,包括與CSS動畫效果的一些對比,需要的朋友可以參考下2015-06-06
一文詳解JavaScript的事件監(jiān)聽(最新整理)
Web頁面需要經(jīng)常和用戶之間進行交互,而交互的過程中我們可能想要捕捉這個交互的過程,比如用戶點擊了某個按鈕、用戶在輸入框里面輸入了某個文本、用戶鼠標經(jīng)過了某個位置,下面介紹下JavaScript的事件監(jiān)聽,感興趣的朋友一起看看吧2024-01-01
uniapp微信小程序支付前端生成簽名并調起微信支付全部代碼
想要在uniapp中實現(xiàn)支付功能,通常需要使用第三方支付服務,如微信支付、支付寶支付,等這篇文章主要給大家介紹了關于uniapp微信小程序支付前端生成簽名并調起微信支付的相關資料,需要的朋友可以參考下2024-07-07
在將uniapp打包成APP端時,上架到應用市場的時候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關于如何在uniapp中設置隱私政策彈窗的相關資料,需要的朋友可以參考下2023-01-01
這是一篇譯文，實例分析制作自定義的信息提示框的實現(xiàn)代碼2009-01-01
這篇文章主要為大家詳細介紹了微信小程序裁剪頭像插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
本篇文章是JS的一個網(wǎng)頁制作小技巧，應用在很多地方，通過JS改變HTML頁面的顏色，有興趣的學習下。2018-02-02
javascript實現(xiàn)框架高度隨內容改變的方法
這篇文章主要介紹了javascript實現(xiàn)框架高度隨內容改變的方法,實例分析了通過父頁面及內容改變框架高度兩種實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JavaScript中Promise的then()方法用例詳解
在JavaScript中Promise是一種用于處理異步操作的編程模式,它代表了一個最終可能完成(解析)或失敗(拒絕)的操作及其結果值,這篇文章主要給大家介紹了關于JavaScript中Promise的then()方法用例的相關資料,需要的朋友可以參考下2025-07-07