在確定 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 文件中有詳細記錄進一步參考。