如何在 jQuery 中偵測 Div 高度或 CSS 屬性的變化？

在jQuery 中偵測Div 高度或CSS 屬性變更

在CSS 變更時觸發事件

在CSS 變更時觸發事件

在CSS 變更時觸發事件

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

    setTimeout(checkForChanges, 500);
}</code>

jQuery 本身事件CSS 屬性變更的處理程序，包括高度修改。但是，有兩種方法可以解決此問題：

方法 1：DOM 元素監控

以預先定義的時間間隔（例如 500 毫秒）定期檢查 DOM 元素是否有 CSS 變更。

<code class="javascript">$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


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

方法 2：自訂事件觸發

將自訂事件處理程序（範例中的「heightChange」）綁定到元素。每當您修改 CSS 時都會觸發該事件。

如果您可以控制 CSS 更改，建議使用第二種方法，因為它更有效率、更優雅。
• 文件：

綁定：將事件處理程序附加到元素。

觸發：執行指定事件類型的所有事件處理程序。

注意：有一個過時的 DOMAttrModified 突變事件，允許追蹤 CSS 更改，但不再推薦。

以上是如何在 jQuery 中偵測 Div 高度或 CSS 屬性的變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！