如何检测 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?
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.
输出:
- 在调整元素大小之前:
- 调整元素大小后: