Javascript 如何在JS中检测div元素宽度的变化（而不是窗口大小的变化）？

我有一个场景，如果div元素宽度改变，我需要执行一些功能。那么有没有办法检测到元素宽度的变化（而不是窗口大小的变化）

比如说,， 我有一个宽度为300px的DIV元素，渲染页面时我的窗口是800px。当我触发一个函数时，我将div元素的宽度更改为400px，因此对于默认的宽度更改，我需要执行一些操作，那么是否有任何方法可以在纯javascript中检测元素大小的更改？

您可以使用。请考虑下面的示例，让您知道何时“代码> > P><代码>标签手动调整大小，或者单击“调整大小”按钮时。任何属性变异都会触发观察者，因此您需要根据需要进行过滤

const p=document.querySelector（“p”）；
const button=document.querySelector（“按钮”）；
const p$=新的MutationObserver（（mutationList，observer）=>{
for（突变列表的突变）{
控制台日志（变异）；
}
});
p$。观察（p{
属性：正确，
childList:false，
子树：false
});
按钮。addEventListener（“单击”，（）=>{
p、 style.width=“100px”；
});
.wrapper{
宽度：400px；
}
.可调整大小{
调整大小：两者；
溢出：滚动；
边框：1px纯黑；
}

您好
调整大小
您可以使用。请考虑下面的示例，让您知道何时“代码> > P><代码>标签手动调整大小，或者单击“调整大小”按钮时。任何属性变异都会触发观察者，因此您需要根据需要进行过滤


const p=document.querySelector（“p”）；
const button=document.querySelector（“按钮”）；
const p$=新的MutationObserver（（mutationList，observer）=>{
for（突变列表的突变）{
控制台日志（变异）；
}
});
p$。观察（p{
属性：正确，
childList:false，
子树：false
});
按钮。addEventListener（“单击”，（）=>{
p、 style.width=“100px”；
});
.wrapper{
宽度：400px；
}
.可调整大小{
调整大小：两者；
溢出：滚动；
边框：1px纯黑；
}

您好
调整大小
您可以使用
MutationObserver
实例，查找
样式的任何更改


var-element=document.getElementById（'d'）；
var observer=新的MutationObserver（函数（）{
log（“您更改了样式”）
});
observer.observe（元素，{attributeFilter:['style']}）；
设置超时（（）=>{
element.style.width='400px'；
}，2000）
#d{
宽度：300px；
高度：300px；
背景：公元前9世纪；
}
您可以使用
MutationObserver
实例，查找
样式
属性的任何更改


var-element=document.getElementById（'d'）；
var observer=新的MutationObserver（函数（）{
log（“您更改了样式”）
});
observer.observe（元素，{attributeFilter:['style']}）；
设置超时（（）=>{
element.style.width='400px'；
}，2000）
#d{
宽度：300px；
高度：300px；
背景：公元前9世纪；
}
完美的解决方案应该是a，但到目前为止，它已经成功了

但是，它将在最新的Chrome、FF和其他一些浏览器中工作：


const elem=document.querySelector（“#sizeobserver”）
新的ResizeObserver（console.log）.observe（elem）
#sizeobserver{
调整大小：两者；
溢出：隐藏；
边框：1px纯黑；
}
调整我的大小完美的解决方案应该是a，但到目前为止，它已经成功了

但是，它将在最新的Chrome、FF和其他一些浏览器中工作：


const elem=document.querySelector（“#sizeobserver”）
新的ResizeObserver（console.log）.observe（elem）
#sizeobserver{
调整大小：两者；
溢出：隐藏；
边框：1px纯黑；
}
调整我的大小如何更改宽度？您是否设置了内联样式？是的，我是这样做的
style.width=“400px”
您始终可以从更改宽度的同一位置触发自定义事件，然后在其他位置侦听该事件。如何更改宽度？您是否设置了内联样式？是的，我是这样做的
style.width=“400px”
您始终可以从更改宽度的同一位置触发自定义事件，并在其他位置侦听该事件。除非使用的值是动态的或样式表定义的，否则这是有效的（例如，
%
，
vh
，
vw
，
动画
，
过渡
，
@媒体
，
var（）
，等等）@FZs嗯，是的，你是对的。我将等待OP说这些情况是否需要解决。你可以添加
animationiteration
或其他动画事件侦听器。基于
%
的侦听器将特别棘手。@zero298，正如你提到的，当div变为父级的100%宽度。除非使用的值是动态的或样式表定义的（例如
%
，
vh
，
vw
，
动画
，
转换
，
@media
，
var（）
，等等），否则该值有效@FZs嗯，是的，你是对的。我将等待OP说这些情况是否需要解决。你可以添加
animationiteration
或其他动画事件侦听器。基于
%
的侦听器将特别棘手。@zero298，正如你提到的，当div变为父级的100%宽度。除非使用的值是动态的或样式表定义的（例如
%
，
vh
，
vw
，
动画
，
转换
，
@media
，
var（）
，等等），否则该值有效是的，除非使用的值是动态的或样式表定义的（例如
%
，
vh
，