How to detect style change of an HTML element with YUI3?

Question

The site I'm working on is using a flaky ads provider and sometimes the JS code they return is buggy, e.g. ends up changing the background color of entire body element instead of its own div element. Unfortunately we have to use their service and it takes ages for them to correct such bugs.

So, I was thinking about creating a workaround, e.g. when the body element's background-color style is changed, my callback function would be called to change it back to correct value. Is there a clean way to do it with YUI3 (or jQuery, or pure JS if YUI3 doesn't have it)?

I know I can set the background periodically to correct color with setInterval(), but it seems wasteful and messy to me. Anyone know a better way?

Answer 1

If you are changing CSS through javascript, you can use Mutation Events (Second Level Events).

You can listen on those events :

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeInsertedIntoDocument
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

So either listen on DOMAttrModified, with Style attribute, or Class attribute.