ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でドキュメントの高さを確実に決定するにはどうすればよいですか?

JavaScript でドキュメントの高さを確実に決定するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-02 02:41:10
オリジナル
753 人が閲覧しました

How Can I Reliably Determine Document Height in JavaScript?

JavaScript を使用したドキュメントの高さの決定

ブラウザの互換性の問題により、JavaScript でドキュメントの正しい高さを取得するのが難しい場合があります。すべてのブラウザは clientHight やscrollHeight などのプロパティを提供しますが、その計算方法は異なります。

Fandango と Paperback Swap の例

Fandango や Paperback Swap のような Web サイトでは、$ などの従来の方法が使用されます。 (document).height()、document.height、および document.body.scrollHeight が失敗するか、不正確な値を返します

ベスト プラクティス: 最大高さの計算

これに対処するために、利用可能なすべてのソースから最大高さを決定するというベスト プラクティスが登場しました。これ含まれるもの:

  • document.body.scrollHeight
  • document.body.offsetHeight
  • document.documentElement.cli entHeight
  • document.documentElement.scrollHeight
  • document.documentElement.offsetHeight

コード実装

次のコード サンプルは、このアプローチを実装します。

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

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
ログイン後にコピー

考慮事項

  • ドキュメントの準備が完了する前にドキュメントの高さをテストします。
  • 動的コンテンツまたはウィンドウサイズ変更には再テストが必要な場合があります。
  • 最初の計算には onload または document Ready イベントを使用します。それ以外の場合は、必要に応じてテストします。

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

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