Determinación de cambios en la altura DIV o atributos CSS

Cuando se trabaja con páginas web, a menudo es necesario realizar un seguimiento de los cambios en la altura u otros CSS atributos de los elementos. jQuery proporciona varias opciones para abordar esta necesidad.

Seguimiento de eventos con 'change()':

Mientras que el evento 'change()' se usa principalmente para elementos de entrada , se puede personalizar para detectar cambios de CSS. Sin embargo, este enfoque implica verificar periódicamente las propiedades CSS del elemento y activar un evento si difieren de los valores anteriores:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Enlace de evento personalizado con 'bind()':

Una solución más eficiente implica crear un evento personalizado y vincularlo al elemento deseado:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});    

En este caso, activamos el evento 'heightChange' cada vez que se modifica la altura del div 'mainContent'.

Nota:

• La frecuencia de las comprobaciones en la función 'checkForChanges()' se puede ajustar para adaptarse a requisitos específicos.
• Los métodos 'bind()' y 'trigger()' están bien documentados en la documentación de jQuery para referencia adicional.