Event detect when css property changed using jQuery

javascript

event-listeners

css-properties

mutation-observer

byAlex Kataev·Nov 16, 2024

To detect CSS property changes, employ MutationObserver for observing DOM mutations. Specifically watch for changes in the style attribute, which involves inline CSS changes.

Example:

// Grabbing the sneaky element that changes its styles
var $target = $('#elementId');

// Summoning the MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'style') {
      console.log('Detected a diva change:', $target.attr('style'));
      // React to the style tantrum here
    }
  });
});

// Configurations for the Observer: Spying on 'style' attribute changes only
var config = { attributes: true, attributeFilter: ['style'] };

// Let the stalking begin
observer.observe($target[0], config);

// When you've had enough of its antics you can stop watching with observer.disconnect();

This piece of code acts as a watchman that logs and allows you to respond when the style attribute of #elementId tries to play hide and seek.

Dancing with Internet Explorer

For Internet Explorer, where the MutationObserver is a no-show, bust a move with the propertychange event for detecting CSS properties changes.

$target.on('propertychange', function(e) {
  if (e.originalEvent.propertyName === 'style') {
    // IE specific style change dance steps
  }
});

Spotlight on "display" property

To keep a close eye on the display property, pump up your observer's awareness or straight up compare its value:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var newDisplay = $target.css('display');
    if (mutation.attributeName === 'style' && newDisplay === 'none') {
      // The display decided to pull a vanishing act
    }
  });
});

A little help from jQuery plugins

The attrchange jQuery plugin is like having a multi-focused binoculars for monitoring attribute, including CSS properties changes:

$target.attrchange({
  trackValues: true,
  callback: function(event) {
    if (event.attributeName === 'style') {
      console.log('Sneaky old value:', event.oldValue, 'Snazzy new value:', event.newValue);
      // Your secret detective tools for CSS changes go here
    }
  }
});

Being an event junkie

Get high on the transitionend event to track the ending of CSS property transitions:

$target.on('transitionend', function(e) {
  if (e.originalEvent.propertyName === 'display') {
    // Display property finally decided to settle down
  }
});

Sharpening up the JavaScript logic

Need to handle certain style changes? We've got you. Trigger your custom behavior when classes decide to flip:

if ($target.hasClass('back-flip')) {
  // Prepare your crash mats
}

Shaving milliseconds like a pro

Razor-sharp your event listeners and JavaScript execution to dodge performance snags when dealing with jQuery events and mutations.

Deep dive into tracking CSS changes

Let's dive deeper into additional scenarios, potential bottlenecks, and techniques to be a CSS Property detective.

Cross-Browser compatibility

Different browsers might give you different reactions. Ensure compatibility:

Safety check: Consult with Can I use...
Polyfills: Sometimes, these friendly code fillers will help us across browser jungs

Performance hacks

Simplify your watch list: Be smart with childList and subtree options
Throttle callbacks: Debouncing/Throttling can save some breath
Clean slate: Disconnect observers when not in use to prevent memory hangovers

CSS and JavaScript: BFFs

CSS classes: Play with classes instead of inline styles, they're more fun
CSS transitions: Let CSS party with its transitions while JS awaits transitionend
Responsive design: Let JS give a helping hand to responsive CSS when it's exhausted

explain-codes / Javascript / Event detect when css property changed using jQuery

Linked

Is there a JavaScript / jQuery DOM change listener?



What is the cleanest way to disable CSS transition effects temporarily?



Change :hover CSS properties with JavaScript



Css 'pointer-events' property alternative for IE



Performance of MutationObserver to detect nodes in entire DOM

