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

今回は高さ、幅関係の書き換えです。前回の記事で書かなかった「height()、width() で値を取得」についても書きます。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

.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 に数値で入ります。

まとめ

jQueryJavaScript
A.innerHeight()A.clientHeight
A.innerWidth()A.clientWidth
A.outerHeight()A.offsetHeight
A.outerWidth()A.offsetWidth
A.height()document.defaultView.getComputedStyle(A, null).height
A.width()document.defaultView.getComputedStyle(A, null).width
Top