Evento detecta cuando la propiedad css cambió usando Jquery

¿Hay alguna manera de detectar si la propiedad css de "visualización" de un elemento ha cambiado (a ninguno o bloque o bloque en línea ...)? si no, algún complemento? Gracias

Nota

Los eventos de mutación han quedado obsoletos desde que se escribió esta publicación y es posible que no sean compatibles con todos los navegadores. En su lugar, utilice un observador de mutaciones .

Sí tu puedes. El módulo de eventos DOM L2 define eventos de mutación ; uno de ellos: DOMAttrModified es el que necesita. Por supuesto, estos no están ampliamente implementados, pero son compatibles al menos con los navegadores Gecko y Opera.

Intente algo similar a estas líneas:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

También puede intentar utilizar el evento "propertychange" de IE como reemplazo de DOMAttrModified. Debería permitir detectarstyle cambios de forma fiable.

Puede usar el complemento attrchange jQuery . La función principal del complemento es vincular una función de escucha en el cambio de atributo de los elementos HTML.

Muestra de código:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & 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...
            }
        }
    }
});

Puede usar la cssfunción de jQuery para probar las propiedades de CSS, por ejemplo.if ($('node').css('display') == 'block').

Colin tiene razón, que no hay ningún evento explícito que se active cuando se cambia una propiedad CSS específica. Pero es posible que pueda darle la vuelta y activar un evento que configure la pantalla y cualquier otra cosa.

También considere la posibilidad de agregar clases CSS para obtener el comportamiento que desea. A menudo, puede agregar una clase a un elemento contenedor y usar CSS para afectar todos los elementos. A menudo coloco una clase en el elemento del cuerpo para indicar que hay una respuesta AJAX pendiente. Entonces puedo usar selectores CSS para obtener la pantalla que quiero.

No estoy seguro de si esto es lo que estás buscando.

Para las propiedades a las que afectará la transición css, puede usar el evento de final de transición, por ejemplo, para z-index:

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

No puedes. CSS no admite "eventos". ¿Me atrevo a preguntar para qué lo necesitas? Mira esta publicación aquí en SO. No puedo pensar en una razón por la que querrías conectar un evento a un cambio de estilo. Supongo aquí que el cambio de estilo se activa en algún otro lugar mediante un fragmento de javascript. ¿Por qué no agregar lógica adicional allí?