📌  相关文章
📜  如何检测 DIV 维度的变化?

📅  最后修改于: 2021-11-25 03:46:37             🧑  作者: Mango

可以使用两种方法检测 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?
    
    

  

    

      GeeksForGeeks     

           How to detect DIV’s dimension changed?          

Check the console to know if the div's dimensions have changed.     

    
               

输出:

  • 在调整元素大小之前:
    输出观察者之前
  • 调整元素大小后:
    输出观察者之后

方法 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?
    
    

  

    

      GeeksForGeeks     

           How to detect DIV’s dimension changed?          

Check the console to know if the div's dimensions have changed.     

    
               

输出:

  • 在调整元素大小之前:
    输出间隔前
  • 调整元素大小后:
    输出间隔后