ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でドキュメントの高さを決定するのが非常に難しいのはなぜですか? 信頼できる解決策は何ですか?

JavaScript でドキュメントの高さを決定するのが非常に難しいのはなぜですか? 信頼できる解決策は何ですか?

DDD
リリース: 2024-12-02 12:17:10
オリジナル
757 人が閲覧しました

Why Is Determining Document Height in JavaScript So Difficult, and What's the Reliable Solution?

JavaScript を使用したドキュメントの高さ計算の課題を克服する

JavaScript を使用してドキュメントの高さを決定すると、特定の Web サイトで問題が発生します。 Fandango や Paperback Swap などのプラットフォームでは、さまざまな JavaScript メソッドが正確な結果を生成できません。

問題

  • $(document).height() が返されます。 Fandango の正しい値ですが、Paperback Swap でエラーがスローされます。
  • document.height
に padding-bottom を適用しています。要素は、これらの問題のあるページには影響しません。

解決策: 包括的なアプローチ

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

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
ログイン後にコピー
ドキュメントの高さを正確に決定するには、包括的なアプローチが必要です。

    このコードは、利用可能なすべての高さの最大値を計算します。オプション:
  • body.scrollHeight
  • body.offsetHeight
  • html.clientHeight
  • html.scrollHeight
html.offsetHeight

考慮事項
  • 注ドキュメントがロードされる前にドキュメントの高さを計算すると、値は常に 0 になります。
  • コンテンツを動的に追加する場合、またはユーザーがウィンドウのサイズを変更できるようにする場合は、ドキュメントの高さの再計算が必要になる場合があります。
onload イベントまたはドキュメント準備完了イベントを使用すると、ロード時の高さの正確な計算が保証されます。

以上がJavaScript でドキュメントの高さを決定するのが非常に難しいのはなぜですか? 信頼できる解決策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート