POSTED | 2022.10.17

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

WWEBのこと

WRITER : Hirabayashi Kazuaki

プロフィールを見る

こんにちは、かずです。

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を卒業したいのに便利で卒業出来る気がしません！！

それでは。

この記事をシェアする

こちらの記事もおすすめ