快捷導(dǎo)航

JavaScript動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度變化的實(shí)現(xiàn)方法

更新時(shí)間：2025年11月10日 09:54:57 作者：程序員大衛(wèi)

在前端開(kāi)發(fā)中,監(jiān)聽(tīng)DOM元素的高度變化有時(shí)候是一個(gè)常見(jiàn)需求,尤其是在做響應(yīng)式設(shè)計(jì)或需要根據(jù)內(nèi)容變化調(diào)整布局時(shí),所以本文給大家介紹了JavaScript動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度變化的兩種實(shí)現(xiàn)方法,需要的朋友可以參考下

背景

在前端開(kāi)發(fā)中，監(jiān)聽(tīng)DOM元素的高度變化有時(shí)候是一個(gè)常見(jiàn)需求，尤其是在做響應(yīng)式設(shè)計(jì)或需要根據(jù)內(nèi)容變化調(diào)整布局時(shí)。常見(jiàn)的解決方案有兩種，一種是使用現(xiàn)代瀏覽器支持的 ResizeObserver，另一種是通過(guò)兼容性更強(qiáng)的 iframe 技術(shù)來(lái)實(shí)現(xiàn)，適用于老款手機(jī)和IE瀏覽器。

1. ResizeObserver

ResizeObserver 是現(xiàn)代瀏覽器提供的一種監(jiān)聽(tīng)元素尺寸變化的 API。它可以監(jiān)聽(tīng)任意元素的大小變化，并在變化時(shí)觸發(fā)回調(diào)函數(shù)，適合處理 DOM 元素高度變化的情況。

示例代碼：

// 選擇你想要監(jiān)聽(tīng)的 DOM 元素
const targetElement = document.querySelector('.target');

// 創(chuàng)建 ResizeObserver 實(shí)例，并傳入回調(diào)函數(shù)
const resizeObserver = new ResizeObserver(entries => {
    // entries 是一個(gè)包含被監(jiān)聽(tīng)元素的數(shù)組
    entries.forEach(entry => {
        // 獲取目標(biāo)元素的當(dāng)前高度
        const height = entry.contentRect.height;
        console.log('元素的當(dāng)前高度:', height);
    });
});

// 開(kāi)始監(jiān)聽(tīng)目標(biāo)元素的尺寸變化
resizeObserver.observe(targetElement);

使用說(shuō)明：

ResizeObserver 會(huì)監(jiān)聽(tīng)目標(biāo)元素的大小變化，并返回一個(gè) entries 數(shù)組，其中每一項(xiàng)代表一個(gè)被觀察的元素。
entry.contentRect 是一個(gè)包含元素尺寸信息的矩形對(duì)象，height 屬性即為元素的高度。
這個(gè)方法對(duì)于現(xiàn)代瀏覽器（Chrome、Firefox、Safari 等）都有效，支持程度較高。

2. Iframe

對(duì)于一些老款瀏覽器（如 IE 瀏覽器）或者需要兼容更多設(shè)備的情況，我們可以采用 iframe 技術(shù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)監(jiān)聽(tīng)容器的高度變化。通過(guò)嵌入一個(gè)隱藏的 iframe 元素，可以監(jiān)聽(tīng) iframe 元素的 resize 事件來(lái)間接判斷容器的高度。

示例代碼（純 HTML 實(shí)現(xiàn)）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動(dòng)態(tài)監(jiān)聽(tīng)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)聽(tīng) iframe 的 resize 事件
        iframe.contentWindow.addEventListener('resize', function () {
            // 獲取容器的當(dāng)前高度
            console.log('容器的當(dāng)前高度:', container.offsetHeight);
        });

        // 為了演示，在容器的高度變化時(shí)觸發(fā) resize 事件
        setInterval(() => {
            container.style.height = Math.random() * 500 + 'px';  // 隨機(jī)調(diào)整容器高度
        }, 2000);  // 每2秒調(diào)整一次高度
    </script>
</body>
</html>

使用說(shuō)明：

這個(gè)方法通過(guò)將一個(gè)隱藏的 iframe 嵌套到目標(biāo)容器內(nèi)，利用 iframe 的 resize 事件來(lái)檢測(cè)容器的高度變化。
由于 iframe 的 resize 事件會(huì)在容器的尺寸發(fā)生變化時(shí)觸發(fā)，因此我們可以在事件回調(diào)中獲取容器的最新高度。
此方法的兼容性更廣，可以支持老舊瀏覽器，如 IE 瀏覽器。

總結(jié)

通過(guò)這兩種方法，我們可以動(dòng)態(tài)監(jiān)聽(tīng) DOM 元素的高度變化，選擇適合的方案可以保證跨瀏覽器和設(shè)備的兼容性。

到此這篇關(guān)于JavaScript動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度變化的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)JS監(jiān)聽(tīng)DOM元素高度變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: