resize event not triggered on div
Question
Take a look at this example: https://jsfiddle.net/vxun2Lgg/2/
I've attached an "resize" event listener on container div. After opening up dev tools, and modifying the width of container , resize callback does not get called. What am I missing?
PS: I am not interested in window resize event, only in container div.
var container = document.getElementsByClassName("container")[0]; container.addEventListener("resize", function() { console.log("resizing") });
<div class="container"></div>
4 answers
solution1
23 ACCPTED 2018-03-25 12:27:36
resize is only valid for the window . If supported you can use ResizeObserver .
new ResizeObserver(() => console.log("resizing")).observe(container);
Otherwise, you will probably have to poll using setInterval and check the size.
solution2
3 2018-03-25 12:33:13
I don't think you can.
https://developer.mozilla.org/en-US/docs/Web/Events/resize
It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on (sent to) the window object (document.defaultView). Only handlers registered on the window object will receive events.
What's the end goal? There is probably an alternative.
solution3
2 2021-04-14 09:59:03
This answer extends the accepted answer by providing a runnable code in pure JavaScript that you can try on the snippet runner (button at the bottom). I kept the explanations directly on the code.
Believe or not, you only need a 3-line function (the onresize function) to simulate the resize event.
Enjoy it!
// 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>
solution4
1 2018-03-25 12:55:26
You can use getBoundingClientRect() on an element. I have included a code sample that uses polling to get the width of a div element and output the result.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.