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