未在 div 上触发调整大小事件

Question

看看这个例子： https : //jsfiddle.net/vxun2Lgg/2/

我在container div 上附加了一个“调整大小”事件侦听container 。 打开开发工具，修改container宽度后，不会调用 resize 回调。 我错过了什么？

PS：我对窗口调整大小事件不感兴趣，只对container div 感兴趣。

 var container = document.getElementsByClassName("container")[0]; container.addEventListener("resize", function() { console.log("resizing") });

 <div class="container"></div>

Answer 1

resize只对window有效。 如果支持，您可以使用ResizeObserver 。

new ResizeObserver(() => console.log("resizing")).observe(container);

否则，您可能必须使用setInterval进行轮询并检查大小。

Answer 2

我不认为你可以。

https://developer.mozilla.org/en-US/docs/Web/Events/resize

仍然可以设置 onresize 属性或使用 addEventListener() 在任何元素上设置处理程序。 但是，调整大小事件仅在（发送到）窗口对象 (document.defaultView) 上触发。 只有在 window 对象上注册的处理程序才会接收事件。

最终目标是什么？ 可能有一个替代方案。

Answer 3

此答案通过在纯 JavaScript 中提供可运行的代码来扩展已接受的答案，您可以在代码段运行程序（底部的按钮）上试用该代码。 我将解释直接保留在代码上。

信不信由你，你只需要一个 3 行函数（ onresize函数）来模拟 resize 事件。

享受吧！

 // This function works like an Event Listener for // resizing a dom element. // // The ResizeObserver calls the callback function // whenever the size of the dom_element changes // (because it's "observing" the dom_elem) // // Do this: // // understand_it_first // .then(copy_it) // .then(use_it); // // THIS IS THE 3-LINE FUNCION YOU WANT TO USE :) // const onresize = (dom_elem, callback) => { const resizeObserver = new ResizeObserver(() => callback() ); resizeObserver.observe(dom_elem); }; // USING IT // // Using constants to make it easier to read the code // const bb = document.getElementById('bad_boss'); const be = document.getElementById('bad_employee'); // Finally, register the observer for the dom_elem // onresize(bb, function () { be.style.width = bb.offsetWidth + 'px'; be.style.height = bb.offsetHeight + 'px'; });

 #bad_boss, #bad_employee{ font-size : 32px; height : 200px; width : 200px; } /* Colors that Talk*/ #bad_boss { background-color : #0badb055; } #bad_employee { background-color : #0b00c0de; color : #0badc0de; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ResizeObserver - onresize Demo</title> </head> <body> <!-- Experiment to resize this <textarea> --> <textarea id="bad_boss">Always do whatever I say!</textarea> <div id="bad_employee">Always, Boss!</div> </body> </html>

Answer 4

您可以在元素上使用getBoundingClientRect() 。 我已经包含了一个代码示例，它使用轮询来获取div元素的宽度并输出结果。

 let demo = document.getElementById('demo'); let demoInfo = document.getElementById('demo-info'); setInterval(() => { let demoSize = demo.getBoundingClientRect(); demoInfo.innerHTML = demoSize.width; }, 500);

 *{ box-sizing: border-box; } #demo{ display: flex; width:50%; background-color: red; padding: 50px; }

 <div id="demo">Demo Div Element</div> <p id="demo-info"></p>