[解決済み] JavaScriptで文書全体の高さを取得するには?
質問
ドキュメントによっては、ドキュメントの高さを取得できないことがあります(何かを絶対に一番下に配置するため)。また、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
または
ドキュメントレディ
イベントが必要な場合は、ロード時に、そうでない場合は、数字が必要なときにテストするだけです。
関連
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueが定義するプライベートフィルタと基本的な使い方
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueのフォームイベントのデータバインディングの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR