Event detect when css property changed using Jquery

Question

Is there a way to detect if the  display  css property of an element is changed  to whether none or block or inline-block      if not  any plugin  Thanks

User · Answer

You can use attrchange jQuery plugin  The main function of the plugin is to bind a listener function on attribute change of HTML elements   Code sample       myDiv   attrchange       trackValues  true     set to true so that the event object is updated with old  amp  new values     callback  function evnt            if evnt attributeName     display        which attribute you want to watch for changes             if evnt newValue search  inline i     -1                        your code to execute goes here

User · Answer

You can t  CSS does not support  events   Dare I ask what you need it for  Check out this post here on SO  I can t think of a reason why you would want to hook up an event to a style change  I m assuming here that the style change is triggered somwhere else by a piece of javascript  Why not add extra logic there

User · Answer

For properties for which css transition will affect  can use transitionend event  example for z-index    x000D   x000D      observed-element   on  webkitTransitionEnd transitionend   function e    x000D    console log  end   e   x000D    alert  z-index changed    x000D      x000D   x000D      changeButton   on  click   function     x000D    console log  click    x000D    document querySelector   observed-element   style zIndex    Math random     1000    0  x000D      x000D   observed-element   x000D    transition  z-index 1ms  x000D    -webkit-transition  z-index 1ms  x000D    x000D  div   x000D    width  100px  x000D    height  100px  x000D    border  1px solid  x000D    position  absolute  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button class  changeButton  gt change z-index lt  button gt  x000D   lt div class  observed-element  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You can use jQuery s css function to test the CSS properties  eg  if     node   css  display       block     Colin is right  that there is no explicit event that gets fired when a specific CSS property gets changed  But you may be able to flip it around  and trigger an event that sets the display  and whatever else   Also consider using adding CSS classes to get the behavior you want  Often you can add a class to a containing element  and use CSS to affect all elements  I often slap a class onto the body element to indicate that an AJAX response is pending  Then I can use CSS selectors to get the display I want   Not sure if this is what you re looking for

[javascript] Event detect when css property changed using Jquery

Examples related to javascript

Examples related to jquery

Examples related to html