在JS中检测div元素宽度变化的方法有多种,以下是其中一种常用的方法:
// 创建一个ResizeObserver实例
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// 获取div元素的新宽度
const newWidth = entry.contentRect.width;
// 执行相应的操作,比如更新UI或调用其他函数
console.log("div元素宽度变化为:" + newWidth);
}
});
// 监听目标div元素的宽度变化
const targetDiv = document.querySelector("#targetDiv");
observer.observe(targetDiv);
在上述代码中,我们首先创建了一个ResizeObserver实例,并通过observe方法指定要观察的目标div元素。然后,在回调函数中可以获取到div元素的新宽度,并进行相应的操作。
let lastWidth = document.querySelector("#targetDiv").offsetWidth;
setInterval(() => {
const currentWidth = document.querySelector("#targetDiv").offsetWidth;
if (currentWidth !== lastWidth) {
// 宽度发生了变化
console.log("div元素宽度变化为:" + currentWidth);
// 执行相应的操作,比如更新UI或调用其他函数
lastWidth = currentWidth;
}
}, 100); // 每100毫秒检测一次
在上述代码中,我们使用offsetWidth属性获取div元素的当前宽度,并与上一次记录的宽度进行比较。如果宽度发生了变化,则执行相应的操作。
以上是两种常用的方法来检测div元素宽度变化。根据具体的需求和场景,选择适合的方法来实现宽度变化的检测。
领取专属 10元无门槛券
手把手带您无忧上云