JavaScript でドキュメント全体の高さを取得するにはどうすればいいですか? 質問する

JavaScript でドキュメント全体の高さを取得するにはどうすればいいですか? 質問する

一部のドキュメントでは、ドキュメントの高さを取得できません (何かを一番下に配置するため)。さらに、padding-bottom をオンにしても、これらのページでは何も行われないようです。ただし、高さが返されるページでは行われます。例:

http://fandango.com
ペーパーバック

Fandango
jQueryは$(document).height();正しい値を返します
document.height0を返します
document.body.scrollHeight0を返します

ペーパーバック交換について:
jQuery の$(document).height();TypeError: $(document)is null は
document.height不正な値を返します。
document.body.scrollHeight不正な値を返します。

注: 何らかのトリックがある場合、ブラウザ レベルの権限があります。

ベストアンサー1

ドキュメント サイズは、すべてのブラウザーが clientHeight プロパティと scrollHeight プロパティを公開しているにもかかわらず、値の計算方法が一致していないため、ブラウザーの互換性の面で悪夢となります。

以前は、正しい高さ/幅をテストする方法については、複雑なベスト プラクティスの式がありました。これには、使用可能な場合は document.documentElement プロパティを使用するか、ドキュメント プロパティにフォールバックするなどが含まれます。

正しい高さを取得する最も簡単な方法は、ドキュメントまたは documentElement にあるすべての高さの値を取得し、最も高い値を使用することです。これは基本的に jQuery が行うことです。

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

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

Firebug + を使った簡単なテストjQuery ブックマークレット引用された両方のページの正しい高さを返します。コード例でも同様です。

ドキュメントが準備される前にドキュメントの高さをテストすると、常に0になることに注意してください。また、さらに読み込んだり、ユーザーがウィンドウのサイズを変更したりした場合は、再テストが必要になる場合があります。onloadまたは書類準備完了ロード時にこれが必要な場合はイベントを実行し、それ以外の場合は数値が必要なときにテストするだけです。

おすすめ記事