こんにちは、かずです。
jQueryで要素の幅や高さを取得するにあたって
コーディング時はほぼ毎度使っているのに、パディングやマージンを含む含まないがいつもごっちゃになるのでまとめます！
要素本体
こちらで要素本体の幅と高さがとれます。
これはこれでいいんですが、上述の通り、パディング・マージン・ボーダーはまた別なんですよね。
パディング（余白）込み
let target = $(‘#target’);
target.innerWidth() //幅
target.innerHeight() //高さ
target.innerWidth() //幅
target.innerHeight() //高さ
パディング・ボーダー（余白・枠線）込み
let target = $(‘#target’);
target.outerWidth() //幅
target.outerHeight() //高さ
target.outerWidth() //幅
target.outerHeight() //高さ
マージン・パディング・ボーダー（要素全部）込み
let target = $(‘#target’);
target.outerWidth(true) //幅
target.outerHeight(true) //高さ
target.outerWidth(true) //幅
target.outerHeight(true) //高さ
並べてみるとたったこれだけなんですよね。
いつもどれがどれだか忘れてしまっていましたが、自分でまとめて書いてみるとなんだかスッと入ってきた感があります。
アウトプット、大事ですね。
今度はさらにこちらを使って便利な何かしらをご紹介していこうかなーと思ってみたり。
jQueryを卒業したいのに便利で卒業出来る気がしません！！
それでは。
JOURNALが気に入ったら「いいね」してね！
target.width() //幅
target.height() //高さ