コンテンツ全体の高さを取得するJavascript

カテゴリ:Javascript小技 2009年1月 5日 12:05

さて、またしてもJavascriptなネタです(;´Д`)
というか、今回は備忘録的に書いてます。

あまり、コンテンツ(ブラウザ全体の、表示領域外の部分も含む)の高さを取得するサンプルがわりと少なかったので自作して備忘録としてアップしました。

Javascriptソース

表示領域以外の高さを取得するには「body(documentElement).scrollHeight」を使います。
ただこれは、表示領域よりコンテンツの高さが高くないと数値が少なくなってしまうため、表示領域の高さを取得する「body(documentElement).clientHeight」と比較して大きい方を採用しています。

さらに、互換モードや準拠モードで取得できる値が違うため、bodyとdocumentElement(html要素)のふたつの値をそれぞれ比較して、一番大きい値を採用しています。

そのため、「body」と「documentElement」のふたつの要素と、さらに「clientHeight」と「scrollHeight」のふたつ、合計4つの値を比較して、一番大きいものがコンテンツ(および表示領域)の最大サイズ、となるわけです。

この記事のカテゴリー一覧を見る⇒Javascript小技

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/110

コメント

1 - とも さん

chromeとsafariでは値が0になってしまうのですが
これらのブラウザにも対応することは可能でしょうか?

2010年12月24日 10:41

2 - えど Author Profile Pageさん

>>ともさん
コメントありがとうございます。
すみません、そちらのブラウザもチェックしていたと思ったんですが、
確認されたブラウザのバージョンはなにになりますでしょうか?

2010年12月26日 14:26

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。