javascript - style - Evento detectar cuando la propiedad css cambió usando Jquery

seleccionar elementos jquery

Question

¿Hay alguna forma de detectar si la propiedad css "display" de un elemento se cambia (a none o block o inline-block ...)? si no, ¿algún complemento? Gracias

Answer 1

No puedes. CSS no admite "eventos". ¿Me atrevo a preguntar para qué lo necesitas? Mira esta post aquí en SO. No puedo pensar en una razón por la cual te gustaría conectar un evento a un cambio de estilo. Supongo que el cambio de estilo se desencadena en otro lugar mediante un javascript. ¿Por qué no agregar lógica extra allí?

Answer 2

Para las propiedades a las que afectará la transición de css, puede usar el evento transitionend, 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>

Answer 3

Puede usar el plugin jQuery de attrchange . La función principal del complemento es vincular una función de escucha en el cambio de atributos de 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...
            }
        }
    }
});

Answer 4

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

Colin tiene razón, que no hay un evento explícito que se active cuando se cambia una propiedad CSS específica. Pero es posible que pueda darle la vuelta y desencadenar un evento que configure la pantalla y todo lo demás.

Considere también el uso 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 a todos los elementos. A menudo pongo una clase en el elemento del cuerpo para indicar que hay una respuesta AJAX pendiente. Entonces puedo usar selectores de CSS para obtener la pantalla que quiero.

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

Answer 5

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.

Pruebe algo en esta línea:

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 . Debe permitir detectar cambios de style manera confiable.