Erkennen von Änderungen des CSSStyleDeclaration-Objekts in JS

Question

Gibt es eine Möglichkeit, benachrichtigt zu werden, wenn ein CSSStyleDeclaration-Objekt geändert wird, genau wie DOM-Änderungen, die mit Ereignissen wie DomAttrModified verfolgt werden können?

Also, wenn es zum Beispiel wurde ein Code JS wie

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

ist es eine Möglichkeit, über diese Änderung in einem JS-Handler informiert werden, ohne zuvor überhaupt den Code-Snippet zu ändern?

Vielen Dank im Voraus!

Answer 1

Ich glaube nicht, dass es etwas nativ vorhanden ist.

Je nach Anwendungsfall können Sie problemlos einen Wrapper erstellen, sodass der Code den Wrapper verwendet und die Listener benachrichtigt, dass sich etwas geändert hat.

Etwas ganz wie diese Grund:

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

, die Sie mögen diese verwenden:

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