DIV 요소의 차원 변경을 효율적으로 감지하려면 어떻게 해야 합니까?

DIV 요소의 치수 변경 감지

특히 창 크기 조정 중에 DIV 요소의 치수 변경 감지는 귀중한 기능이 될 수 있습니다. 특정 시나리오에서는. 이 기사에서는 Resize Observer API를 사용하여 이를 달성하는 방법을 살펴봅니다.

제공된 HTML 코드에 설명된 대로 jQuery 크기 조정 이벤트 핸들러는 이 목적에 적합하지 않습니다. Resize Observer API는 DOM 요소의 차원 변경을 수신하는 표준화되고 보다 효율적인 방법을 제공합니다.

Resize Observer API 사용

DIV에서 차원 변경을 감지하려면 Resize Observer API를 사용하여 다음 단계를 따르세요.

1. 새 ResizeObserver를 만듭니다. 인스턴스:

const observer = new ResizeObserver(callback);

2. 관찰된 요소의 크기가 변경될 때마다 호출되는 ResizeObserver 생성자에 콜백 함수를 전달합니다.

function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}

3. ResizeObserver를 사용하여 대상 DIV를 관찰합니다. 예:

observer.observe(targetDiv);

4. HTML 코드에 이전 브라우저용 Resize Observer 폴리필을 포함해야 합니다.

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

예 코드

다음 코드 조각은 Resize Observer API:

<div>

Resize Observer API를 활용하면 DIV 요소의 크기 변경을 효과적으로 감지하여 웹 애플리케이션에서 그에 따라 대응할 수 있습니다.

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