2009-09-09 50 views

Respuesta

86

Sí, puedes. El módulo de eventos DOM L2 define mutation events; 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.

Probar algo en este sentido:

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 IE's "propertychange" event como un reemplazo para DOMAttrModified. Debe permitir detectar style cambios de manera confiable.

+0

Gracias. es compatible con Firefox? –

+0

Sí, IIRC, FF2 y hasta uno actual – kangax

+0

Esto no funcionará si la propiedad efectiva de visualización CSS para un elemento se cambia indirectamente, por ejemplo, al cambiar la clase CSS del elemento. –

-16

No se puede. CSS no admite "eventos". ¿Me atrevo a preguntar para qué lo necesitas? Mira esto 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í?

+1

Tengo varios eventos que puede activar un cuadro para que aparezca o no. Y tengo otro elemento que depende de la apariencia de esa caja para hacer cosas. Ahora, no quiero repetir el código y conectarme a todos los demás eventos que aparecen en el cuadro, aunque esa es una forma de hacerlo. ¡Solo redundancia! –

+0

¿Es redundante, quizás usar un sistema basado en reglas funcionaría? es decir, ¿alguna estructura similar a JSON que defina lo que debería pasarle a algún control cuando cambie otro control? de esta manera solo necesitarías crear 1 función que use el objeto de regla y quizás el control actual (id) como parámetro? – Colin

+3

¿Por qué está esto downvoted? Definir la clase para el elemento primario de ambos elementos y cambiar el estilo es la única solución adecuada para esto. –

4

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

Colin tiene razón al decir 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 la adición de 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 si esto es lo que está buscando.

+0

¿Cómo se hace esto? – crosenblum

16

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

Ejemplo 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... 
      } 
     } 
    } 
}); 
+0

Tenga en cuenta que para algunos complementos que modificar CSS evnt.attributeName es 'estilo' no 'mostrar'. – jerrygarciuh

+0

Funciona bien, pero esto es más rápido que usar la búsqueda de expresiones regulares y no necesita el primero si (evnt.attributeName ...): if (evnt.newValue.indexOf ('display: inline-block')> -1) { ...; regreso;} –

2

por propiedades en lo que afectará a la transición css, puede utilizar 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>

Cuestiones relacionadas