毎回忘れるjQueryの高さと幅の取得について

UPDATE：2022.10.17

CATEGORY

Contents

要素本体
パディング（余白）込み
パディング・ボーダー（余白・枠線）込み
マージン・パディング・ボーダー（要素全部）込み

こんにちは、かずです。

jQueryで要素の幅や高さを取得するにあたって
コーディング時はほぼ毎度使っているのに、パディングやマージンを含む含まないがいつもごっちゃになるのでまとめます！

要素本体

let target = $(‘#target’);
target.width() //幅
target.height() //高さ

こちらで要素本体の幅と高さがとれます。
これはこれでいいんですが、上述の通り、パディング・マージン・ボーダーはまた別なんですよね。

パディング（余白）込み

let target = $(‘#target’);
target.innerWidth() //幅
target.innerHeight() //高さ

パディング・ボーダー（余白・枠線）込み

let target = $(‘#target’);
target.outerWidth() //幅
target.outerHeight() //高さ

マージン・パディング・ボーダー（要素全部）込み

let target = $(‘#target’);
target.outerWidth(true) //幅
target.outerHeight(true) //高さ

並べてみるとたったこれだけなんですよね。
いつもどれがどれだか忘れてしまっていましたが、自分でまとめて書いてみるとなんだかスッと入ってきた感があります。

アウトプット、大事ですね。

今度はさらにこちらを使って便利な何かしらをご紹介していこうかなーと思ってみたり。

jQueryを卒業したいのに便利で卒業出来る気がしません！！

それでは。