View on GitHub

attrchange beta

onattrchange listener

a jQuery plugin


attrchange is a simple jQuery function to bind a listener function on attribute change of an element.

The handler function is triggered when any attribute such as id, class, style, e.t.c is added or updated or modified to the element.

This original idea is from an a question posted on stack overflow


To use the function, include jQuery library and attrchange plugin.

<script type="text/javascript" src=""></script>
<script type="text/javascript"

Bind attrchange handler function to selected elements

	trackValues: true, /* Default to false, if set to true the event object is 
				updated with old and new value.*/
	callback: function (event) { 
	    //event    	          - event object
	    //event.attributeName - Name of the attribute modified
	    //event.oldValue      - Previous value of the modified attribute
	    //event.newValue      - New value of the modified attribute
	    //Triggered when the selected elements attribute is added/updated/removed


Example 1: An interactive demo to show when the handler is triggered and the additional information available inside the handler. Try using the and in the left block to move the div block +/- 10px to left/right which triggers the attribute change handler.

Show code


Note:Updated log is highligted in blue

Example 2: An interactive demo to test different conditions when the handler function will be called. You can add/update/remove attributes on the demo div elements. Click on the demo div boxes to pop the Attribute Changer dialog, using which you can add/remove/update the attributes of the selected div box.

Upon each update the handler function will be triggered and In this example the handler function simply prints the attribute name and the div id in the logger.

Show code

demo 1 div
demo 2 div
demo 3 div
demo 4 div
demo 5 div

Note: logger to show the execution of the handler function

Attribute Changer

Listed below are the attributes of the div:

Add/Modify Attribute

Attr Name

Attr Value



Download as a .zip file

Download as a tar.gz file

Browser Compatibility

This plugin has been successfully tested in the following browsers:

Known Issues

attrchange plugin uses different API to support cross browser/backward compatibility. The response has been normalized to match with the response from MutationObserver however the return values from the API's are sometimes different especially on style attribute.

On changing the style attribute, Older standard such as DOMAttrModified/onpropertychange returns the specific css property that was updated (ex: return for updating css top would return -> top: 60px) but the MutationObserver returns the entire style attribute value and not the property that was changed (something like $(this).attr('style')).