jQuery・JavaScript 高さ、横幅取得方法

jQueryによる要素サイズの取得

高さ

.height()　要素の高さのみ
.innerHeight() 要素のpaddingを含んだ高さ
.outerHeight()　要素のborder、paddingを含んだ高さ
.outerHeight(true) 要素のmargin、border、paddingを含んだ高さ

横幅

.width()　要素の幅のみ
.innerWidth() 要素のpaddingを含んだ幅
.outerWidth()　要素のborder、paddingを含んだ幅
.outerWidth(true) 要素のmargin、border、paddingを含んだ幅

JavaScriptによる要素サイズの取得

script.js

var h = element.clientHeight;

高さ

.clientHeight 　paddingを含んだ高さ
.scrollHeight 　paddingを含んだ画面上に表示されていないコンテンツを含む高さ
.offsetHeight 　border、padding、スクロールバーを含んだ高さ

横幅

.clientWidth 　paddingを含んだ幅
.scrollWidth 　paddingを含んだ画面上に表示されていないコンテンツを含む幅
.offsetWidth 　border、padding、スクロールバーを含んだ幅

ウィンドウサイズ

window.innerWidth スクロールバーを含んだウィンドウの幅
window.innerHeight スクロールバーを含んだウィンドウの高さ
window.outerWidth サイドバーなどを含んだブラウザ全体の幅
window.outerHeight タブやブックマークバーなどを含んだブラウザ全体の高さ

display: none;の時のサイズ取得

取得しない	取得する
offsetHeight	height
clientHeight	innerHeight
	outerHeight

参考

http://cly7796.net/wp/javascript/can-not-get-size-when-elements-of-the-display-none/
http://js.studio-kingdom.com/javascript/
http://semooh.jp/jquery/