JavaScript에서 DIV 차원 변경을 안정적으로 감지하려면 어떻게 해야 합니까?

DIV 크기 변경 감지

문제:

DIV의 크기를 결정하는 것은 종종 특히 창 크기 조정 중에 요소의 위치가 변경될 때 필요합니다. 그러나 DIV에 대한 기존 jQuery 크기 조정 이벤트는 차원 변경을 감지하지 못합니다.

해결책: Resize Observer API

최신 솔루션은 다음을 제공하는 Resize Observer API입니다. DIV의 변경 사항을 모니터링하는 더 좋은 방법

구현:

Resize Observer API를 사용하려면:

1. HTML에 스크립트를 포함하세요.

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill/dist/ResizeObserver.min.js"></script>

2. 새로 만들기 크기 조정 관찰자:

   const resizeObserver = new ResizeObserver(function(entries) {
     ...
   });

3. 대상 DIV 관찰:

   resizeObserver.observe(targetDiv);

4. 차원 변경을 처리하는 콜백 함수 정의:

   function callback(entries) {
     const entry = entries[0];
     const width = entry.contentRect.width;
     const height = entry.contentRect.height;
   
     // Do something with the new dimensions
   }

5. 추가 관찰자에 대한 콜백 함수:

   resizeObserver.addCallback(callback);

   이제 Resize Observer API를 사용하면 내부 요소의 위치가 변경되더라도 DIV 크기의 변화를 감지하고 이에 대응할 수 있습니다.

위 내용은 JavaScript에서 DIV 차원 변경을 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!