Wykrywanie zmian obiektu CSSStyleDeclaration w JS

Question

Czy istnieje sposób uzyskania powiadomienia, gdy obiekt CSSStyleDeclaration zostanie zmieniony, podobnie jak zmiany DOM, które można śledzić za pomocą zdarzeń takich jak DomAttrModified?

Więc jeśli na przykład był jakiś kod JS jak

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

jest jakiś sposób, aby otrzymywać powiadomienia o tej zmianie modułu obsługi JS bez zmiany fragmentu kodu powyżej w ogóle?

Z góry dziękuję!

Answer 1

Nie sądzę, że jest do tego dostęp natywnie.

W zależności od przypadku użycia można łatwo zbudować opakowanie, aby Twój kod korzystał z opakowania i powiadamiał słuchaczy, że coś się zmieniło.

Coś zupełnie podstawowy tak:

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

które można użyć tak:

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