215
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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/

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
215
Help us understand the problem. What are the problem?