Event Detection for CSS Property Changes with jQuery

In the realm of web development, detecting alterations to the CSS properties of an element can be crucial for implementing dynamic updates. With jQuery, you can tap into the power of DOM events to effectively monitor and respond to changes in CSS properties such as "display."

Using DOMAttrModified Event

Modern browsers provide support for DOM mutation events, which include the DOMAttrModified event. This event is specifically designed to notify you when the attributes of an element are modified, including CSS properties defined inline or through external stylesheets.

To harness the DOMAttrModified event, you can utilize jQuery's on() function, as demonstrated below:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

In this example, we attach an event listener to the document.documentElement element, which represents the root of the document. When a style attribute (such as "display") is modified, this event handler is triggered, allowing you to access the previous and current values of the modified attribute.

Leveraging IE's "propertychange" Event

For older browsers that do not support DOMAttrModified, you can use Internet Explorer's proprietary "propertychange" event as a fallback. While this event is specifically supported by IE, it can provide a reliable method for detecting style changes in those environments.

To utilize the "propertychange" event, you can employ jQuery's on() function with a string argument, as seen in the following example:

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Note on Mutation Observers

While the aforementioned techniques were common approaches for detecting CSS property changes in the past, newer browsers recommend using Mutation Observers, which provide a more standardized and streamlined mechanism for monitoring specific DOM elements for changes.