如何检测 DIV 维度的变化？

可以使用两种方法检测 div 尺寸的变化：

方法 1：使用 ResizeObserver 接口检查更改
ResizeObserver接口用于报告元素尺寸的变化。
首先使用 jQuery 选择要跟踪的元素。 ResizeObserver 对象是使用回调函数创建的，该函数定义在检测到维度变化时应执行的操作。
该对象的observe() 方法用于要跟踪的元素。这将检查任何更改并在检测到任何尺寸更改时执行回调函数。

句法：

let resizeObserver = new ResizeObserver(() => {
    console.log("The element was resized");
});
  
resizeObserver.observe(elem);

例子：

  

    
        How to detect DIV’s dimension changed?
    
    
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 100px;
            overflow: auto;
        }
    

  

    
      GeeksForGeeks
    
    
      How to detect DIV’s dimension changed?
    
    Check the console to know if the div's dimensions have changed.
    
    
    
    
  
    
        elem = $("#box")[0];
  
        let resizeObserver = new ResizeObserver(() => {
            console.log("The element was resized");
        });
  
        resizeObserver.observe(elem);
    

  

输出：

• 在调整元素大小之前：
  
• 调整元素大小后：
  

方法 2：每 500 毫秒检查一次维度的变化
此方法涉及每 500 毫秒检查一次要跟踪的元素的尺寸。将维度值与旧迭代的值进行比较以检查是否存在任何差异。

使用jQuery 中的height()和width()方法找出要跟踪的元素的高度和宽度。这些维度将用作元素的最后跟踪基线维度并存储在变量中。

创建了一个新函数，在其中找出元素的高度和宽度。这将是将与以前的尺寸进行比较的新尺寸。 if 语句用于将新的高度和宽度与先前找到的基线进行比较。如果尺寸不匹配，则表示尺寸已更改。将在此处执行尺寸更改时需要采取的操作。
找到的新维度将分配给旧维度作为基线，以便可以使用它们检查下一次迭代。
创建的函数使用setInterval()函数每 500 毫秒连续循环一次。这将不断检查高度和宽度的变化，并在有差异时执行给定的函数。
这种方法比前一种方法慢得多，减少每次检查之间的时间会进一步降低性能。

句法：

let lastHeight = $("#box").height();
let lastWidth = $("#box").width();
  
function checkHeightChange() {
    newHeight = $("#box").height();
    newWidth = $("#box").width();
  
    if (lastHeight != newHeight || lastWidth != newWidth) {
        console.log("The element was resized");
  
        // assign the new dimensions
        lastHeight = newHeight;
        lastWidth = newWidth;
     }
 }
  
setInterval(checkHeightChange, 500);

例子：

  

    
        How to detect DIV’s dimension changed?
    
    
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 100px;
            overflow: auto;
        }
    

  

    
      GeeksForGeeks
    
    
      How to detect DIV’s dimension changed?
    
    Check the console to know if the div's dimensions have changed.
    
    
    
    
  
    
        let lastHeight = $("#box").height();
        let lastWidth = $("#box").width();
  
        function checkHeightChange() {
            newHeight = $("#box").height();
            newWidth = $("#box").width();
  
            if (lastHeight != newHeight ||
                lastWidth != newWidth) {
                console.log("The element was resized");
  
                // assign the new dimensions
                lastHeight = newHeight;
                lastWidth = newWidth;
            }
        }
  
        setInterval(checkHeightChange, 500);
    

  

输出：

• 在调整元素大小之前：
  
• 调整元素大小后：