脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth()

.innerHeight()

height + padding（上下） の値を取得する命令です。変更等は jQuery でも出来ません。取得だけです。

jQuery

var myHeight = $("#main").innerHeight()

書き換え JavaScript

var myHeight = document.getElementById("main").clientHeight

myHeight に値が入ります。単位はなく「30」など数値で返ってきます。innerHeight = clientHeight のようなイメージです。padding 付きの高さを返します。

.innerWidth()

width + padding（左右） の値を取得する命令です。これも取得だけ行います。

jQuery

var myWidth = $("#main").innerWidth()

書き換え JavaScript

var myWidth = document.getElementById("main").clientWidth

myWidth に値が入ります。innerHeight と考えかたは同じです。padding 付きの値で単位なしで返します。

.outerHeight()

height + padding（上下） + border（上下） の値を取得する命令です。これも取得だけです。

jQuery

var myHeight = $("#main").outerHeight()

書き換え JavaScript

var myHeight = document.getElementById("main").offsetHeight

myHeight に値が入ります。outerHeight = offsetHeight のような感じです。こちらも同様、単位なしの「180」のような形で数値で返ります。border まで入った数値となります。

.outerWidth()

height + padding（左右） + border（左右） の値を取得する命令です。これも取得だけです。

jQuery

var myWidth = $("#main").outerWidth()

書き換え JavaScript

var myWidth = document.getElementById("main").offsetWidth

myWidth に数値で値が返ります。

.height()（値を取得）

jQuery

var myHeight = $("#main").height()

書き換え JavaScript

var myMain = document.getElementById("main");
var myHeight = document.defaultView.getComputedStyle(myMain, null).height

値は myHeight に入ります。

height の値取得には .css() で CSS の値を取得する命令を使っています。

参考：.css() の書き換え

.width()（値を取得）

jQuery

var myWidth = $("#main").width()

書き換え JavaScript

var myMain = document.getElementById("main");
var myWidth = document.defaultView.getComputedStyle(myMain, null).width

値は myWidth に数値で入ります。

まとめ