Event detect when css property changed using Jquery

by

Note

Mutation events have been deprecated since this post was written, and may not be supported by all browsers. Instead, use a mutation observer.

Yes you can. DOM L2 Events module defines mutation events; one of them – DOMAttrModified is the one you need. Granted, these are not widely implemented, but are supported in at least Gecko and Opera browsers.

Try something along these lines:

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

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

You can also try utilizing IE’s “propertychange” event as a replacement to DOMAttrModified. It should allow to detect style changes reliably.

More Related Contents:

  1. Get the longest text in HTML document using Jquery or javascript
  2. Hide/Show image on one click [closed]
  3. jQuery Mobile: document ready vs. page events
  4. jQuery Mobile: Markup Enhancement of dynamically added content
  5. How to move an element into another element?
  6. Submitting a form on ‘Enter’ with jQuery?
  7. Share data between HTML pages
  8. JavaScript does not fire after appending [duplicate]
  9. Removing an item from a select box
  10. File Upload without Form
  11. How to bind Events on Ajax loaded Content?
  12. How to get JQuery.trigger(‘click’); to initiate a mouse click
  13. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  14. Populate one dropdown list based on the selection of other dropdown list
  15. Retrieving file names out of a multi-file upload control with javascript
  16. how to use json file in html code
  17. Is there any “on DOM change” event? [duplicate]
  18. How to reach the element itself inside jQuery’s `val`?
  19. How to select all text in contenteditable div?
  20. Save a pre element as PDF with CSS
  21. Browser back button handling
  22. Center flex item in container, when surrounded by other flex items
  23. Change the style of :before and :after pseudo-elements? [duplicate]
  24. jQuery: How to listen for DOM changes?
  25. Trigger a button click inside an iframe [duplicate]
  26. Remove scrollbar but not scrolling functionality [duplicate]
  27. How can I remove wrapper (parent element) without removing the child?
  28. Fire oninput event with jQuery
  29. Detect if dropdown navigation would go off screen and reposition it
  30. canvas- Cropping images in different shapes

Leave a Comment