Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event detect when css property changed using Jquery

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

like image 682
HP. Avatar asked Sep 09 '09 02:09

HP.


People also ask

How to fire event if CSS class is changed using jQuery?

Approach: In jQuery, there is no provision to trigger an event on class change. An alternative method is to manually raise an event when you programmatically change the class using the trigger() function. The trigger() function will raise an event whenever the class of the button is changed.

Can we change CSS property value using jQuery?

It is possible to change the CSS property of an element by using a simple JavaScript API, but we try to complete this challenge using jQuery css() method. Syntax: $(). css(propertyname, value); $().

What does .show do in JavaScript?

Definition and Usage The show() method shows the hidden, selected elements. Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden). Tip: To hide elements, look at the hide() method.

Which jQuery function is used to change the CSS properties of any element?

You can change CSS using the jQuery css() method which is used for the purpose of getting or setting style properties of an element. Using this method you can apply multiple styles to an HTML all at once by manipulating CSS style properties.


1 Answers

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.

like image 145
kangax Avatar answered Oct 06 '22 03:10

kangax