Help us understand the problem. What is going on with this article?

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/

ypyp
ただの覚書だけ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away