Is it possible to listen to a style change event

Question

Is it possible to create an event listener in jQuery that can be bound to any style changes  For example  if I want to  do  something when an element changes dimensions  or any other changes in the style attribute I could do      div   bind  style   function         console log   this  css  height             div   height 100      yields  100    It would be really useful   Any ideas   UPDATE  Sorry for answering this myself  but I wrote a neat solution that might fit someone else    function         var ev   new   Event  style            orig     fn css        fn css   function               this  trigger ev           return orig apply this  arguments                 This will temporary override the internal prototype css method and the redefine it with a trigger at the end  So it works like this      p   bind  style   function e        console log    this  attr  style              p   width 100      p   css  color   red

User · Answer

Interesting question  The problem is that height   does not accept a callback  so you wouldn t be able to fire up a callback  Use either animate   or css   to set the height and then trigger the custom event in the callback  Here is an example using animate     tested and works  demo   as a proof of concept        test   bind  style   function         alert   this  css  height              test   animate  height  100  function      this  trigger  style

User · Answer

I had the same problem  so I wrote this  It works rather well  Looks great if you mix it with some CSS transitions   function toggle visibility id       var e   document getElementById  mjwelcome       if e style height              e style height    0px      else       e style height

User · Answer

you can try Jquery plugin   it trigger events when css is change and its easy to use   http   meetselva github io  gist-section-attrchangeExtension        selector   attrchange     trackValues  true     callback  function  e          console log    lt p gt Attribute  lt b gt     e attributeName    lt  b gt  changed from  lt b gt     e oldValue    lt  b gt  to  lt b gt     e newValue    lt  b gt  lt  p gt           event attributeName - Attribute Name       event oldValue - Prev Value       event newValue - New Value

User · Answer

There is no inbuilt support for the style change event in jQuery or in java script  But jQuery supports to create custom event and listen to it but every time there is a change  you should have a way to trigger it on yourself  So it will not be a complete solution

User · Answer

Just adding and formalizing  David  s solution from above   Note that jQuery functions are chainable and return  this  so that multiple invocations can be called one after the other  e g  container css  overflow    hidden   css  outline   0      So the improved code should be    function         var ev   new   Event  style            orig     fn css        fn css   function             var ret   orig apply this  arguments             this  trigger ev           return ret     must include this

User · Answer

How about jQuery cssHooks   Maybe I do not understand the question  but what you are searching for is easily done with cssHooks  without changing css   function     copy from documentation    function            First  check to see if cssHooks are supported if      cssHooks          If not  output an error message   throw  new Error   jQuery 1 4 3 or above is required for this plugin to work             Wrap in a document ready call  because jQuery writes    cssHooks at this time and will blow away your functions    if they exist    function          cssHooks   someCSSProp            get  function  elem  computed  extra              Handle getting the CSS property            set  function  elem  value              Handle setting the CSS value                     jQuery       https   api jquery com jQuery cssHooks

User · Answer

As others have suggested  if you have control over whatever code is changing the style of the element you could fire a custom event when you change the element s height       blah   bind  height-changed  function                  blah   css  height  100px         blah   trigger  height-changed      Otherwise  although pretty resource-intensive  you could set a timer to periodically check for changes to the element s height

User · Answer

The declaration of your event object has to be inside your new css function   Otherwise the event can only be fired once    function         orig     fn css        fn css   function             var ev   new   Event  style            orig apply this  arguments             this  trigger ev

User · Answer

Since jQuery is open-source  I would guess that you could tweak the css function to call a function of your choice every time it is invoked  passing the jQuery object    Of course  you ll want to scour the jQuery code to make sure there is nothing else it uses internally to set CSS properties   Ideally  you d want to write a separate plugin for jQuery so that it does not interfere with the jQuery library itself  but you ll have to decide whether or not that is feasible for your project

User · Answer

Things have moved on a bit since the question was asked - it is now possible to use a MutationObserver to detect changes in the  style  attribute of an element  no jQuery required   var observer   new MutationObserver function mutations        mutations forEach function mutationRecord            console log  style changed                      var target   document getElementById  myId    observer observe target    attributes   true  attributeFilter     style         The argument that gets passed to the callback function is a MutationRecord object that lets you get hold of the old and new style values   Support is good in modern browsers including IE 11

User · Answer

I think the best answer if from Mike in the case you can t launch your event because is not from your code  But I get some errors when I used it  So I write a new answer for show you the code that I use   Extension     Extends functionality of   css       This could be renamed if you d like  i e     fn cssWithListener   func        function         orig     fn css        fn css   function             var result   orig apply this  arguments             this  trigger  stylechanged            return result                Usage     Add listener    element   on  stylechanged   function          console log  css changed            Perform change    element   css  background    red      I got error because var ev   new   Event  style    Something like style was not defined in HtmlDiv   I removed it  and I launch now   this  trigger  stylechanged    Another problem was that Mike didn t return the resulto of   css      then It can make problems in some cases  So I get the result and return it  Now works    In every css change include from some libs that I can t modify and trigger an event

[javascript] Is it possible to listen to a "style change" event?

Examples related to javascript

Examples related to jquery