JS内のCSSStyleDeclarationオブジェクトの変更を検出する

Question

CSSStyleDeclarationオブジェクトがDomAttrModifiedのようなイベントを使用して追跡できるDOM変更のように変更されたときに通知を受ける方法はありますか？

したがって、たとえば

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

のようないくつかのJSコードは、すべて上記のコードを変更することなく、JSハンドラでその変更についての通知を取得する方法はありましたがあれば？

ありがとうございます！

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