Javascript - 如何检测元素宽度变化？

Question

在纯 Javascript 和 jQuery 中，如何检测元素的宽度是否已更改？例如，如果在调整窗口大小时元素的宽度根据 CSS 媒体查询发生变化，如何检测它？

我已经尝试过 -

$(element).resize(function() {});

但这并没有奏效。

我已经找到了关于插件的解决方案。是的，它们可以工作，但是有任何基于纯 Javascript 和 jquery 的解决方案吗？

Answer 1

调整大小事件应该应用于窗口对象。

你可以这样做:

$(document).ready(function() {
    $(window).on('resize', '', {'width':$('.resize-watch').width()}, onResizeWatch);

});

function onResizeWatch(e)
{
    console.log('old width', e.data.width);
    console.log('new width', $('.resize-watch').width());
    $(window).off('resize');
    $(window).on('resize', '', {'width':$('.resize-watch').width()}, onResizeWatch);
}