检测 JS 中 CSSStyleDeclaration 对象的变化答案

【问题标题】：Detect changes of CSSStyleDeclaration object in JS检测 JS 中 CSSStyleDeclaration 对象的变化
【发布时间】：2013-05-18 12:15:44
【问题描述】：

有什么方法可以在 CSSStyleDeclaration 对象发生更改时得到通知，就像 DOM 更改一样，可以使用 DomAttrModified 等事件进行跟踪？

如果有一些类似的 JS 代码

document.styleSheets[0].rules[0].style.backgroundImage = "url(myimage.png)";

有没有什么方法可以在不更改上面的代码 sn-p 的情况下在 JS 处理程序中获得有关更改的通知？

提前致谢！

【问题讨论】：

我认为，您可以将 cssText 保存在一个变量中，稍后再进行比较。
@Mr_Green 不能解决问题，OP 询问是否有一个他可以挂钩的事件，当 CSS 更改时会触发。就像 DOM Mutation 事件一样。有趣的问题 OP。
@Mr_Green 轮询大字符串并不完全有效
鉴于从脚本更改输入值时不会触发事件，我很确定从脚本更改样式表时不会触发事件。
我只想提一下，现在是 2015 年，我们有 Object.observe，但在该死的 CSSOM 上仍然没有任何效果，甚至没有任何实验性的东西。 CSS 确实是 Web 堆栈中不经意间的臭小子。

标签： javascript html css dom

【解决方案1】：

我不认为有任何本机可用的东西。

根据您的用例，您可以轻松构建包装器，以便您的代码使用包装器并通知侦听器发生了某些变化。

像这样非常基本的东西：

function Wrapper() {
    var listeners = []

    return {
        addListener: function(fn) {
            listeners.push(fn)
        },
        removeListener: function(fn) {
            listeners.splice(listeners.indexOf(fn), 1) // indexOf needs shim in IE<9
        },
        set: function(prop, val) {
            prop = val
            // forEach needs shim in IE<9, or you could use a plain "for" loop
            listeners.forEach(call)

            function call(fn) {
                fn(prop, val)
            })
        }
    }
}

你可以这样使用：

var wrapper = Wrapper()
wrapper.addListener(function(prop, val) {
    // When you'll change a prop, it'll get there and you'll see
    // which property is changed to which value
})

// This sets the property and notifies all the listeners
wrapper.set(document.styleSheets[0].rules[0].style.backgroundImage, "url(myimage.png)")

【讨论】：

+1 这可能是唯一适用于所有浏览器的方法，即使在任何浏览器中都可以忽略夜间。