要使用JavaScript或jQuery检测div何时调整大小,可以使用以下方法:
ResizeObserver
:ResizeObserver
是一个现代的API,用于在元素的大小发生变化时触发回调。以下是如何使用ResizeObserver
来监测div大小变化的示例:
const div = document.querySelector('div');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('Div大小调整为:', entry.contentRect.width, 'x', entry.contentRect.height);
}
});
resizeObserver.observe(div);
resize
事件:如果您使用的是jQuery,可以使用resize
事件来监测div的大小变化。以下是示例:
$(document).ready(function() {
$('div').resize(function() {
console.log('Div大小调整为:', $(this).width(), 'x', $(this).height());
});
});
请注意,这种方法可能会导致性能问题,因为它会频繁地触发事件。在实际应用中,请谨慎使用。
setInterval
检查大小变化:如果您不能使用ResizeObserver
或jQuery
,可以使用setInterval
定期检查div的大小。以下是示例:
const div = document.querySelector('div');
function checkSize() {
const width = div.offsetWidth;
const height = div.offsetHeight;
console.log('Div大小调整为:', width, 'x', height);
}
checkSize();
setInterval(checkSize, 1000); // 每秒检查一次
请注意,这种方法可能会导致性能问题,因为它会频繁地检查大小。在实际应用中,请谨慎使用。
总之,使用ResizeObserver
是最佳方法,但在某些情况下,您可能需要使用其他方法。请确保在实际应用中考虑性能问题。
领取专属 10元无门槛券
手把手带您无忧上云