jQuery를 사용하여 CSS 변경, 특히 높이 변경을 감지하는 방법은 무엇입니까?

JQuery를 사용하여 CSS 변경 사항을 감지하는 방법

JQuery에는 CSS 속성의 변경 사항을 감지하기 위한 내장 이벤트가 없습니다. 그러나 다음 접근 방식을 사용하여 고유한 DOM을 만들 수 있습니다.

지속적인 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>

구체적으로 높이 변경 확인(초기 문제에 대한 해결 방법):

#mainContent div의 높이 변경을 감지하는 특정 경우에는 다음 코드를 사용하여 두 번째 접근 방식을 사용합니다.

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

#mainContent div의 높이를 변경하기 전에 이벤트 핸들러를 바인딩해야 합니다.

위 내용은 jQuery를 사용하여 CSS 변경, 특히 높이 변경을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!