javascript - examples - ¿Es posible escuchar un evento de "cambio de estilo"?

jquery syntax

Question

¿Es posible crear un detector de eventos en jQuery que pueda vincularse a cualquier cambio de estilo? Por ejemplo, si quiero "hacer" algo cuando un elemento cambia de dimensiones, o cualquier otro cambio en el atributo de estilo que podría hacer:

$(''div'').bind(''style'', function() {
console.log($(this).css(''height''));
});
$(''div'').height(100); // yields ''100''

Sería realmente útil.

¿Algunas ideas?

ACTUALIZAR

Perdón por responder esto yo mismo, pero escribí una solución clara que podría adaptarse a otra persona:

(function() {
var ev = new $.Event(''style''),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();

Esto anulará temporalmente el método interno prototype.css y lo redefinirá con un desencadenador al final. Entonces funciona así:

$(''p'').bind(''style'', function(e) {
console.log( $(this).attr(''style'') );
});
$(''p'').width(100);
$(''p'').css(''color'',''red'');

Answer 1

Como jQuery es de código abierto, supongo que podría modificar la función css para llamar a una función de su elección cada vez que se invoca (pasando el objeto jQuery). Por supuesto, querrá revisar el código de jQuery para asegurarse de que no haya nada más que use internamente para establecer las propiedades de CSS. Idealmente, querría escribir un plugin separado para jQuery para que no interfiera con la biblioteca de jQuery, pero tendrá que decidir si eso es factible para su proyecto.

Answer 2

Como otros han sugerido, si tiene control sobre cualquier código que esté cambiando el estilo del elemento, puede lanzar un evento personalizado cuando cambie la altura del elemento:

$(''#blah'').bind(''height-changed'',function(){...});
...
$(''#blah'').css({height:''100px''});
$(''#blah'').trigger(''height-changed'');

De lo contrario, aunque consume muchos recursos, puede configurar un temporizador para comprobar periódicamente los cambios en la altura del elemento ...

Answer 3

Creo que la mejor respuesta es de Mike en el caso de que no pueda lanzar su evento porque no es de su código. Pero recibo algunos errores cuando lo usé. Entonces escribo una nueva respuesta para mostrarle el código que uso.

Extensión

// Extends functionality of ".css()"
// This could be renamed if you''d like (i.e. "$.fn.cssWithListener = func ...")
(function() {
orig = $.fn.css;
$.fn.css = function() {
var result = orig.apply(this, arguments);
$(this).trigger(''stylechanged'');
return result;
}
})();

Uso

// Add listener
$(''element'').on(''stylechanged'', function () {
console.log(''css changed'');
});
// Perform change
$(''element'').css(''background'', ''red'');

Obtuve el error porque var ev = new $ .Event (''style''); Algo parecido al estilo no se definió en HtmlDiv. Lo eliminé y ahora lanzo $ (this) .trigger ("stylechanged"). Otro problema fue que Mike no devolvió el resultado de $ (css, ..) entonces puede causar problemas en algunos casos. Entonces obtengo el resultado y lo devuelvo. Ahora funciona ^^ En cada cambio css incluyo desde algunas libs que no puedo modificar y desencadenar un evento.

Answer 4

Interesante pregunta. El problema es que height () no acepta una devolución de llamada, por lo que no podrá iniciar una devolución de llamada. Use animate () o css () para establecer la altura y luego active el evento personalizado en la devolución de llamada. Aquí hay un ejemplo que usa animate (), probado y funciona ( demo ), como una prueba de concepto:

$(''#test'').bind(''style'', function() {
alert($(this).css(''height''));
});
$(''#test'').animate({height: 100},function(){
$(this).trigger(''style'');
});

Answer 5

La declaración de su objeto de evento debe estar dentro de su nueva función css. De lo contrario, el evento solo se puede disparar una vez.

(function() {
orig = $.fn.css;
$.fn.css = function() {
var ev = new $.Event(''style'');
orig.apply(this, arguments);
$(this).trigger(ev);
}
})();

Answer 6

Las cosas se han movido un poco desde que se hizo la pregunta: ahora es posible usar un MutationObserver para detectar cambios en el atributo ''estilo'' de un elemento, no se requiere jQuery:

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
console.log(''style changed!'');
});
});
var target = document.getElementById(''myId'');
observer.observe(target, { attributes : true, attributeFilter : [''style''] });

El argumento que pasa a la función de devolución de llamada es un objeto MutationRecord que le permite obtener los valores de estilo antiguo y nuevo.

El soporte es bueno en los navegadores modernos, incluido IE 11+.

Answer 7

No hay soporte incorporado para el evento de cambio de estilo en jQuery o en script java. Pero jQuery admite crear un evento personalizado y escucharlo, pero cada vez que hay un cambio, debe tener una forma de activarlo usted mismo. Entonces no será una solución completa.

Answer 8

Solo añadiendo y formalizando la solución de @David desde arriba:

Tenga en cuenta que las funciones jQuery son encadenables y devuelven ''this'' para que se puedan invocar varias invocaciones una después de otra (por ejemplo, $container.css("overflow", "hidden").css("outline", 0); ).

Entonces, el código mejorado debería ser:

(function() {
var ev = new $.Event(''style''),
orig = $.fn.css;
$.fn.css = function() {
var ret = orig.apply(this, arguments);
$(this).trigger(ev);
return ret; // must include this
}
})();

Answer 9

Tuve el mismo problema, así que escribí esto. Funciona bastante bien Se ve muy bien si lo mezclas con algunas transiciones CSS.

function toggle_visibility(id) {
var e = document.getElementById("mjwelcome");
if(e.style.height == '''')
e.style.height = ''0px'';
else
e.style.height = '''';
}

Answer 10

puedes probar el plugin Jquery, activa eventos cuando css es cambiante y es fácil de usar

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
trackValues: true,
callback: function (e) {
//console.log( ''<p>Attribute <b>'' + e.attributeName +''</b> changed from <b>'' + e.oldValue +''</b> to <b>'' + e.newValue +''</b></p>'');
//event.attributeName - Attribute Name
//event.oldValue - Prev Value
//event.newValue - New Value
}
});