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

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

我试过了-

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

但这并不奏效

---

我已经找到了关于插件的解决方案。是的，它们可以工作，但是任何纯Javascript和基于jquery的解决方案都应该对窗口对象应用调整大小事件

您可以这样做：

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

---

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

您可以这样做：

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

---

你可能想看看这个问题，我猜你也可以通过实例化一个变异观察者对象，并通过一些逻辑参数用mutationobserver初始化它，例如，如果要观察属性更改，请将属性设置为true，甚至使用包含要观察的属性的过滤器数组。根据与窗口调整大小相关的宽度更改，您可以为调整大小事件添加事件侦听器，并检查元素

offsetWidth

。你可能想看看这个问题，我猜你也可以通过实例化一个变异观察者对象，并通过一些逻辑参数用mutationobserver初始化它，例如，如果要观察属性更改，请将属性设置为true，甚至使用包含要观察的属性的过滤器数组。根据与窗口调整大小相关的宽度更改，您可以为调整大小事件添加事件侦听器，并检查元素

offsetWidth

。