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

Question

在纯Javascript和jQuery中，如何检测元素的宽度是否已更改？ 例如，如果在调整窗口大小时，按照css媒体查询更改元素的宽度，如何检测它？

我试过了 -

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

但那没用。

我在SO上找到了关于插件的解决方案。是的他们工作，但任何纯Javascript和基于jquery的解决方案？

Answer 1

应该对窗口对象应用resize事件。

你可以这样做：

$(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);
}