브라우저 전체에서 JavaScript의 문서 높이를 정확하게 계산하는 방법은 무엇입니까?

JavaScript에서 문서 높이 계산: 호환성 문제 해결

문서 높이를 결정하는 것은 요소 배치와 같은 다양한 시나리오에서 매우 중요합니다. . 그러나 특정 문서는 문제가 발생하여 표준 방법을 사용할 때 불일치 또는 잘못된 값이 발생합니다.

두 가지 문제 사례는 Fandango 및 Paperback Swap입니다.

• Fandango에서 $(document). height()는 올바른 값을 반환하는 반면 document.height와 document.body.scrollHeight는 둘 다입니다. 0.
• Paperback Swap에서 $(document).height()에서 오류가 발생하고 document.height와 document.body.scrollHeight 모두 잘못된 값을 반환합니다.

이유 이러한 불일치는 브라우저마다 문서 크기를 다르게 계산한다는 사실에 있습니다. 이 문제를 해결하려면 다음 공식을 사용해야 합니다.

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

이 접근 방식을 사용하면 사용되는 브라우저에 관계없이 가장 높은 높이 값을 얻을 수 있습니다.

중요합니다. 문서가 완전히 로드되기 전에 문서 높이를 테스트하면 항상 값이 0이 됩니다. 또한 이후에 문서를 변경하거나 창 크기를 조정하면 높이를 다시 계산해야 할 수도 있습니다. 이러한 시나리오를 처리하려면 onload 또는 문서 준비 이벤트를 활용하세요.

위 내용은 브라우저 전체에서 JavaScript의 문서 높이를 정확하게 계산하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!