要素の高さや幅を取得するには、height/width、innerHeight/innerWidth、outerHeight/outerWidthなどのメソッドを利用します*。*これらのメソッドは、それぞれ要素が表示/非表示かどうかにかかわらず動作します。これだけさまざまなメソッドがあると、どれを使ったらよいのか迷うところかもしれませんので、それぞれの違いを以下の表にまとめておきます。それぞれのメソッドの違いは、padding(内容と枠の間の余白)、border-width(枠線の太さ)、margin(枠外の余白)を高さ/幅に含めるかどうかです。○それぞれのメソッドの対応関係outerHeight/outerWidthメソッドはデフォルトではマージンを無視しますが、引数にtrueを指定することでマージンまで含めた高さ/幅を取得できます。以下に、具体的なサンプルも見てみましょう。<div>要素の高さ/幅をそれぞれのメソッドで取得し、得られる値の違いを確認します。MVCがいよいよ登場です。<div>要素の高さ/幅をそれぞれのメソッドで取得(HeightWidth.html)このHTMLを実際にブラウザで開くブラウザで開くリスト042の実行結果これらのメソッドを利用することで、$(window)や$(document)の高さ/幅も取得できますが、使用しているブラウザによって得られる値が異なりますので、注意してください。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。