Определение изменений высоты DIV или атрибутов CSS

При работе с веб-страницами часто необходимо отслеживать изменения высоты или других CSS атрибуты элементов. jQuery предоставляет различные варианты для удовлетворения этой потребности.

Отслеживание событий с помощью 'change()':

Хотя событие 'change()' в основном используется для элементов ввода , его можно настроить для обнаружения изменений CSS. Однако этот подход предполагает периодическую проверку свойств CSS элемента и вызов события, если они отличаются от предыдущих значений:

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

    setTimeout(checkForChanges, 500);
}

Привязка пользовательского события с помощью 'bind()':

Более эффективное решение предполагает создание пользовательского события и привязку его к нужному элементу:

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


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

В этом случае мы вызываем событие «heightChange» всякий раз, когда изменяется высота элемента div «mainContent».

Примечание:

• Частоту проверок в функции checkForChanges() можно настроить в соответствии с конкретными требованиями.
• Методы «bind()» и «trigger()» хорошо описаны в документации jQuery для дальнейшего использования.