1. ホーム
  2. javascript

[解決済み] JavaScriptで文書全体の高さを取得するには?

2022-03-24 18:50:06

質問

ドキュメントによっては、ドキュメントの高さを取得できないことがあります(何かを絶対に一番下に配置するため)。また、padding-bottomを指定しても、これらのページでは何も起こりませんが、heightが返されるページでは起こります。その例です。

http://fandango.com
http://paperbackswap.com

ファンダンゴについて
jQueryの $(document).height(); は正しい値を返す
document.height は0を返す
document.body.scrollHeight は0を返します。

ペーパーバック・スワップについて。
jQueryの $(document).height(); TypeErrorです。 $(document) は null
document.height は不正な値を返します
document.body.scrollHeight は不正確な値を返します

注:私はブラウザレベルの権限を持っていますが、もしそこに何らかのトリックがあるのなら。

解決方法は?

すべてのブラウザはclientHeightとscrollHeightプロパティを公開していますが、その値の計算方法が一致していないため、ドキュメントサイズはブラウザの互換性という悪夢のような状態になっています。

以前は、正しい高さ/幅をテストする方法として、複雑なベストプラクティスの公式が存在していました。これは、document.documentElement プロパティがあればそれを使用し、なければドキュメントのプロパティに依存する、といった具合です。

正しい高さを得るための最も単純な方法は、document または 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 または ドキュメントレディ イベントが必要な場合は、ロード時に、そうでない場合は、数字が必要なときにテストするだけです。