JavaScript에서 DIV 차원 변경을 어떻게 감지할 수 있습니까?

JavaScript로 DIV 크기 변경 감지

DIV 내의 요소는 창 크기 조정 중에 위치가 변경될 수 있지만 DIV의 크기 자체도 변경될 수 있습니다. 이러한 차원 변화를 모니터링하기 위해 다양한 방법을 활용할 수 있습니다.

1. jQuery 크기 조정 이벤트(사용되지 않음)

이전에 대상 DIV에서 jQuery 크기 조정 이벤트를 사용하려고 시도했습니다. 그러나 이 방법은 일반적으로 div에는 효과적이지 않습니다. 창/문서 크기 변경에 더 적합합니다.

2. Mutation Observer API

새로운 접근 방식은 DOM 요소의 변경 사항을 관찰할 수 있는 Mutation Observer API입니다. 여기에는 치수 변경이 포함될 수 있습니다. 예는 다음과 같습니다.

const element = document.getElementById('test_div');

const observer = new MutationObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element, { attributes: true, attributeFilter: ['style'] });

3. Resize Observer API(선호)

Resize Observer API는 특히 차원의 변화 모니터링을 목표로 하며 최신 브라우저에서 지원됩니다. 사용 방법은 다음과 같습니다.

const element = document.getElementById('test_div');

const observer = new ResizeObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element);

DIV의 크기가 변경되면 관찰자는 지정된 콜백 함수를 트리거합니다.

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