Javascript 检测JS中CSSStyleDeclaration对象的更改

当对象像DOM更改一样发生更改时，是否有任何方法可以得到通知，可以使用DomAttrModified之类的事件跟踪DOM更改

例如，如果有一些JS代码

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

在JS处理程序中有没有任何方法可以在根本不更改上面的代码段的情况下得到关于该更改的通知

---

提前谢谢

我认为没有任何本机提供的功能

根据您的用例，您可以轻松地构建一个包装器，以便您的代码使用该包装器并通知侦听器发生了更改

一些非常基本的东西，比如：

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)")

---

我认为，您可以将cssText保存在一个变量中，稍后再进行比较。@UêGreen先生没有解决这个问题，OP询问是否有一个事件可以挂接，当CSS更改时会触发该事件。就像DOM突变事件一样。有趣的问题OP.@Mr_Green轮询一个大字符串并不完全有效。鉴于在脚本中更改输入值时不会触发任何事件，我非常确定在脚本中更改样式表时不会触发任何事件。我只想指出，这是2015年，我们有目标。观察，仍然没有任何东西在该死的CSSOM上工作，甚至没有任何实验。CSS真的是网络堆栈中不经意的臭小子。+1这可能是在所有浏览器中都能工作的唯一方法，即使在任何不考虑夜间睡眠的浏览器中也是如此。