Can I use a MutationObserver to listen for changes on computed styles? I have a div which width is 100% and I'd like to know when its computed width changes, but so far no success. The MutationObserver works if I change the style pragmatically:
document.getElementById("myDiv").style.width = "200px"
But it doesn't work if the interface is resized by a window resize or if a parent div resizes.
Any solution that doesn't involve timeouts?
UPDATE: I'm particularly interested in a solution that also wouldn't involve listening to window resize event, because sometimes the interface changes without the window resizing. For instance, a div that has a percentage as width and a parent node size changes.
Support for observing style changes is in discussion . For now you could leverage transitions. The idea is to add a css transition for the width (or whatever) to the element. The transition should have a duration of almost zero, so you won't notice it.
After a transition has finished a transitionend
event is fired. Add a listener for that event. Now whenever the width changes, the transition will start, immediately finish and the event will fire. Which means your listener will be called.
#myDiv {
...
transition: width 0.01s;
}
$("#myDiv").on("transitionend", function () { ... } );
Supported by IE10+
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.