Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

コンテンツ表示領域の取得方法

Windowの内周・外周を取得する方法です。

Windowのプロパティで以下で取得できます。

innerHeight //ウィンドウ内周(コンテンツ表示領域)の高さ
innerWidth //ウィンドウ内周(コンテンツ表示領域)の横幅
outerHeight //ウィンドウ外周の高さ
outerHeight //ウィンドウ外周の横幅

参考サイトでは、「上記プロパティはIEには対応していません。」とのことでしたが、 以下のコードを実行した限り、IE5以上でもうごきました。

上記プロパティを使うかわりに、以下の通りかくそうです。(※bodyタグがよみこまれた後に使用Callしないととれないため、注意)
document.body.clientHeight //クライアントの高さ
document.body.clientWidth //クライアントの横幅

IE5以上、Chromeいずれも、windowのプロパティでも、document.body~のやりかたでも表示できました。 10年もたつと、現在はどちらもつかえそうです。

See the Pen zEGgWv by satsuki mori (@satsuki) on CodePen.

参考サイト

codezine.jp