Phát hiện các thay đổi của đối tượng CSSStyleDeclaration trong JS

Question

Có cách nào để nhận thông báo khi đối tượng CSSStyleDeclaration bị thay đổi giống như thay đổi DOM có thể được theo dõi bằng các sự kiện như DomAttrModified không?

Vì vậy, nếu có ví dụ được một số mã JS như

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

là có cách nào để nhận được thông báo về sự thay đổi trong một handler JS mà không thay đổi các đoạn mã trên ở tất cả?

Cảm ơn trước!

Answer 1

Tôi không nghĩ có bất kỳ điều gì khả dụng cho điều này.

Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể dễ dàng xây dựng trình bao bọc, để mã của bạn sử dụng trình bao bọc và thông báo cho người nghe biết có gì đó đã thay đổi.

Something khá cơ bản như thế này:

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

Mà bạn có thể sử dụng như thế này:

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