JavaScript で複数のブラウザーでドキュメントの高さを正確に計算するにはどうすればよいですか?

JavaScript でのドキュメントの高さの計算: 互換性の問題の解決

ドキュメントの高さの決定は、要素を絶対的に配置するなど、さまざまなシナリオにとって重要です。 。ただし、特定のドキュメントでは問題が発生し、標準的な方法を使用すると不一致や不正確な値が発生します。

2 つの問題のあるケースは、Fandango と Paperback Swap です:

• Fandango では、$(document)。 height() は正しい値を返しますが、document.height と document.body.scrollHeight は両方とも 0.
• On 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 イベントまたは document Ready イベントを利用します。

以上がJavaScript で複数のブラウザーでドキュメントの高さを正確に計算するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。