我有下面的样本html，有一个DIV有100%的宽度。它包含了一些元素。在执行窗口调整大小时，内部元素可能会被重新定位，div的尺寸可能会改变。我在问是否有可能挂钩div的维度变化事件?以及如何做到这一点?我目前绑定回调函数到目标DIV上的jQuery调整大小事件，但是，没有输出控制台日志，如下所示:
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
$('#test_div').bind('resize', function(){
console.log('resized');
});
</script>
</head>
<body>
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
</body>
</html>
一个更新的标准是Resize Observer api，有很好的浏览器支持。
函数输出大小（） {
宽度.值 = 文本框偏移宽度
高度.值 = 文本框偏移高度
}
输出大小（）
new ResizeObserver （outputsize）.observe（textbox）
宽度：<输出 id=“宽度”>0</output><br>
高度：<输出 id=“高度”>0</output><br>
<textarea id=“textbox”>调整我</textarea><br>的大小
调整观察者
文档:https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
规范:https://wicg.github.io/ResizeObserver
当前支持:http://caniuse.com/#feat=resizeobserver
填充物：https://github.com/pelotoncycle/resize-observer
https://github.com/que-etc/resize-observer-polyfill
https://github.com/juggle/resize-observer
令人惊讶的是，尽管这个问题已经存在很久了，但在大多数浏览器中仍然存在这个问题。
正如其他人所说，Chrome 64+现在自带Resize observed，然而，该规范仍在微调中，Chrome目前(截至2019-01-29)落后于最新版本的规范。
我已经在野外看到了一些很好的ResizeObserver腻子，但是，一些没有严格遵循规范，另一些有一些计算问题。
我迫切需要这种行为来创建一些可以在任何应用程序中使用的响应式web组件。为了使他们工作得很好，他们需要随时知道他们的尺寸，所以ResizeObservers听起来很理想，我决定创建一个尽可能严格遵循规范的填充。
回购协议:
https://github.com/juggle/resize-observer
演示:
https://codesandbox.io/s/myqzvpmmy9
您可以尝试以下代码片段中的代码，它使用纯javascript满足您的需求。(如果您想测试div，则运行代码片段并单击整页链接以触发div调整大小的警报。)
基于这是一个100毫秒的setInterval的事实，我敢说我的PC没有发现它太多的CPU饥饿。(0.1%的CPU被用作测试时Chrome中所有打开的选项卡的总和。)但这只是一个div，如果你想为大量的元素这样做，那么是的，它可能是非常CPU饥饿。
无论如何，您总是可以使用单击事件来停止div-resize嗅探。
var width = 0;
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
}
if(document.getElementById("test_div").clientWidth!==width) {
alert('resized div');
width = document.getElementById("test_div").clientWidth;
}
}, 100);
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
你也可以检查一下小提琴
更新
var width = 0;
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
}
if(document.getElementById("test_div").clientWidth!==width) {
alert('resized');
width = document.getElementById("test_div").clientWidth;
}
}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" id="clickMe" />
<input type="button" value="button 2" id="clickMeToo" />
<input type="button" value="button 3" />
</div>
更新的小提琴
