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

【问题标题】：Javascript - How to detect an element width change?Javascript - 如何检测元素宽度变化？
【发布时间】：2016-10-04 13:06:19
【问题描述】：

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

我试过了-

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

但这没有用。

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

【问题讨论】：

你可能想看看这个问题stackoverflow.com/questions/6492683/…
我也猜想你可以通过实例化一个突变观察者对象并通过一些逻辑参数用 MutationObserverInit 初始化它来做到这一点，比如如果你想观察属性更改将属性设置为 true，甚至使用包含的过滤器数组您想观察的属性。 developer.mozilla.org/en-US/docs/Web/API/MutationObserver
根据窗口调整大小相关的宽度更改，您可以为调整大小事件添加事件侦听器并检查您的元素 offsetWidth 例如。 developer.mozilla.org/en-US/docs/Web/Events/resize

标签： javascript jquery css resize width

【解决方案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);
}

【讨论】：