确定 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'); //<====
    ...
});    

在这种情况下，只要 'mainContent' div 的高度发生变化，我们就会触发 'heightChange' 事件。

注意：

• 可以调整“checkForChanges()”函数中的检查频率以满足特定要求。
• “bind()”和 'trigger()' 方法在 jQuery 文档中有详细记录，以供进一步参考。