javascript - Can I use a MutationObserver to listen for changes on computed styles? - Stack Overflow

admin管理员组

文章数量:1394207

Can I use a MutationObserver to listen for changes on puted styles? I have a div which width is 100% and I'd like to know when its puted 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.

Can I use a MutationObserver to listen for changes on puted styles? I have a div which width is 100% and I'd like to know when its puted 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.

• javascript
• css
• dom

Share Improve this question Follow edited Sep 25, 2015 at 2:31 lbrandao asked Sep 23, 2015 at 18:01 lbrandaolbrandao 4,37344 gold badges3737 silver badges4444 bronze badges 6

• give a try with jquery's width() function – Vineet Commented Sep 23, 2015 at 18:06
• it has to be automatic – lbrandao Commented Sep 23, 2015 at 18:10
• yes width function will calculate the width dynamically – Vineet Commented Sep 23, 2015 at 18:11
• sorry buddy, but you didn't understand the question, I want to know WHEN the size changes! – lbrandao Commented Sep 23, 2015 at 18:15
• relevant - stackoverflow./questions/6492683/… – James LeClair Commented Sep 23, 2015 at 18:18

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

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+

本文标签： javascriptCan I use a MutationObserver to listen for changes on computed stylesStack Overflow