株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > 毎回忘れるjQueryの高さと幅の取得について

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

UPDATE : 2022.10.17

CATEGORY :
Hirabayashi
Hirabayashi

Hirabayashi

こんにちは、かずです。

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

それでは。

この記事を書いた人Who wrote this blog

Hirabayashi Kazuaki

猫をこよなく愛するコーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design