jQuery에서 Div 높이 또는 CSS 속성의 변경 사항을 감지하는 방법은 무엇입니까?

jQuery에서 Div 높이 또는 CSS 속성 변경 감지

CSS 변경에 대한 이벤트 트리거

jQuery에는 기본적으로 특정 이벤트가 없습니다. 높이 수정을 포함한 CSS 속성 변경을 위한 핸들러입니다. 그러나 이 문제를 해결하기 위한 두 가지 접근 방식이 있습니다.

접근 방법 1: DOM 요소 모니터링

미리 정의된 간격(예: 500밀리초)으로 DOM 요소에서 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>

접근 방법 2: 맞춤 이벤트 트리거

맞춤 이벤트 핸들러(예제에서는 'heightChange')를 요소에 바인딩합니다. CSS를 수정할 때마다 이벤트를 트리거합니다.

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


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

CSS 변경 사항을 제어할 수 있는 경우 두 번째 접근 방식이 더 효율적이고 우아하므로 권장됩니다.

문서:

• bind: 이벤트 핸들러를 요소에 연결합니다.
• trigger: 지정된 이벤트 유형에 대한 모든 이벤트 핸들러를 실행합니다.

참고:

CSS 변경 사항을 추적할 수 있는 오래된 DOMAttrModified 돌연변이 이벤트가 있었지만 더 이상 권장되지 않습니다.

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