LoginSignup
220

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-04-21

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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
220