我可以使用MutationObserver来监听计算样式的变化吗? [英] Can I use a MutationObserver to listen for changes on computed styles?
问题描述
我可以使用MutationObserver来监听计算样式的变化吗?我有一个宽度为100%的div,我想知道它的计算宽度是否变化,但到目前为止还没有成功。如果我改变了实际的风格,MutationObserver可以工作:
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
但是如果界面通过调整窗口大小调整大小,或者如果父div调整大小,则不起作用。
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?
更新:我特别感兴趣的一个解决方案,也不会涉及听窗口调整大小事件,因为有时界面改变,而窗口大小调整。例如,具有百分比宽度和父节点大小的div会更改。
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.
推荐答案
支持观察样式更改为<讨论中的href =http://xml3d.org/xml3d/specification/styleobserver/ =noreferrer> 。现在你可以利用转换。这个想法是为元素的width(或任何)添加一个css转换。过渡期应该有几乎为零的时间,所以你不会注意到。
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.
转换完成后,$ code> transitionend 事件触发。添加该事件的监听器。现在每当宽度变化时,转换将开始,立即完成,事件将触发。这意味着你的听众将被调用。
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 () { ... } );
由IE10 +
这篇关于我可以使用MutationObserver来监听计算样式的变化吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!