javascript - 计算样式更改是否触发了任何事件？

Question

我可以在 JavaScript 中监听一个事件，告诉我特定 DOM 元素的计算样式发生了变化吗？

如果不是，那么使用 JavaScript 获取 DOM 元素的计算样式的阻塞最少的方法是什么？

Answer 1

对于 DOM 元素的计算样式的更改，没有事件侦听器。

如果您喜欢，您可以自己编写一个，通过 setInterval 观察 getComputedStyle 的值，但根据实现，它可能会很昂贵且笨拙。

如果您只担心调整大小时的样式更改，您应该使用 window.onresize（如下），或者可能使用 JQuery调整大小事件处理程序。

window.onresize = function(event) {
    ...
};

这里有一个很好的阅读关于引用 CSS3 属性的深度跨浏览器解决方案，但是以下是通过这个答案为各种流行浏览器提供的简单解决方案。

它不是 jQuery，但在 Firefox、Opera 和 Safari 中，您可以使用 window.getComputedStyle(element)来获取元素的计算样式，在 IE<=8 中，您可以使用element.currentStyle. 返回的对象在每种情况下都不同，我不确定使用 Javascript 创建的元素和样式的效果如何，但也许它们会很有用。

在 Safari 中，您可以执行以下操作：

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;