Can You Have a JavaScript Hook Trigger After a Dom Element's Style Object Changes

Can you have a JavaScript hook trigger after a DOM element's style object changes?

Edit 4: Live Demo

$(function() {

  $('#toggleColor').on('click', function() {

    $(this).toggleClass('darkblue');

  }).attrchange({

    trackValues: true,

    callback: function(event) {

      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");

    }

  });

});

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 12px;

}

#toggleColor {

  height: 70px;

  width: 300px;

  padding: 5px;

  border: 1px solid #c2c2c2;

  background-color: #DBEAF9;

}

#toggleColor span {

  font-weight: bold;

}

#toggleColor.darkblue {

  background-color: #1A9ADA;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>

<p>Click below div to toggle class darkblue.</p>

<div id="toggleColor"></div>

Is it possible to listen to a style change event?

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.

Firing event on DOM attribute change

Note: As of 2012, Mutation Events have been removed from the standard and are now deprecated. See other answers or documentation for how to use their replacement, MutationObserver.

You are referring to DOM Mutation Events. There is poor (but improving) browser support for these events. Mutation Events plugin for jQuery might get you some of the way.

Event detect when css property changed using Jquery

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.

How to know when a class changed/added to an HTML element?

This would only be possible in modern browsers that supports the MutationObserver object. You will not be able to observe DOM changes directly otherwise. You could always write some interceptors of the addClass function that would automatically raise events, but I would not recommend this. What you are trying to achieve is pretty bad design. You should not rely on the DOM to keep track of your application state.

How to know when a class changed/added to an HTML element?

This would only be possible in modern browsers that supports the MutationObserver object. You will not be able to observe DOM changes directly otherwise. You could always write some interceptors of the addClass function that would automatically raise events, but I would not recommend this. What you are trying to achieve is pretty bad design. You should not rely on the DOM to keep track of your application state.

---

Related Topics