如何使用 jQuery 檢測 CSS 變化，特別是高度變化？

如何使用 JQuery 偵測 CSS 變更

JQuery 沒有用於偵測 CSS 屬性變更的內建事件。但是，您可以使用以下方法建立自己的方法：

連續DOM 監控（第一種方法）：

定期輪詢DOM（例如，每500 毫秒）以將目前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);
}

checkForChanges();</code>

手動事件觸發（第二種方式）：

將自訂事件處理程式綁定到目標元素，然後在更改元素的CSS 時手動觸發此事件。

範例：

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

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

具體確定高度變化（初始問題的解決方案）：

在檢測檢測問題的解決方案）：

<code class="javascript">$('#mainContent').bind('heightChange', function () {
    $("#separator").css('height', $("#mainContent").height());
});</code>

在檢測檢測到mainContent div在高度變化的特定情況下，使用第二種方法並使用以下程式碼：

記住在對 #mainContent div 進行任何高度變更之前綁定事件處理程序。

以上是如何使用 jQuery 檢測 CSS 變化，特別是高度變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！