DIV 요소 차원 변경을 어떻게 안정적으로 감지할 수 있습니까?

DIV 요소의 크기 변경 감지

브라우저 창 크기를 조정할 때 DIV 요소의 크기 변경을 감지하는 데 어려움을 겪었습니다. 이 질문에서는 이 문제에 대한 가능한 해결책을 탐색합니다.

jQuery 크기 조정 이벤트 바인딩

DIV의 jQuery 크기 조정 이벤트에 콜백 함수를 바인딩하는 초기 접근 방식이 올바르지 않습니다. 크기 조정 이벤트는 DIV의 크기가 변경될 때가 아니라 창 크기가 조정될 때만 트리거됩니다.

해결책: Resize Observer API

최신 솔루션은 Resize입니다. 브라우저를 잘 지원하는 Observer API입니다. 이 API를 사용하면 요소 크기의 변화를 관찰할 수 있습니다.

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

제공된 HTML 샘플에서 다음과 같이 Resize Observer API를 사용할 수 있습니다.

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

이 코드 텍스트 상자의 크기가 변경되면 너비와 높이 출력이 업데이트됩니다.

위 내용은 DIV 요소 차원 변경을 어떻게 안정적으로 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!