CODEWITHSUNDEEP
javascriptcssdom
lbrandao
lbrandao

Reputation: 4373

Can I use a MutationObserver to listen for changes on computed styles?

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.

Upvotes: 3

Views: 4746

Answers (1)

a better oliver
a better oliver

Reputation: 26828

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+

Upvotes: 7

Related Questions