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

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

More than 1 year has passed since last update.

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした