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 문서에 잘 문서화되어 있습니다.