jQueryでWindowやコンテンツの高さや幅を取得する方法

jQueryでWindowやコンテンツの高さや幅を取得する方法です。

トップページのファーストビュー時に画面いっぱいに画像が表示されるページを見かけますがそういうことも出来ます。

またコンテンツの幅や高さを一番大きいものに合わせるなんてことも出来ます。

Windowのサイズを取得

Windowのサイズってどこからどこまで?

今回取得するWindowのサイズというのは上の画像の赤枠のことを言います。

ブラウザのタブやブックマークバーなどは入りません。

※右端のスクロールバーは入るかも・・・

Windowの高さを取得

jQueryでWindowの高さを取得する書き方です。

Windowの幅を取得

jQueryでWindowの横幅を取得する書き方です。

コンテンツのサイズを取得

コンテンツ部分はちょっとだけやっかいです。

コンテンツ部分には、コンテンツエリア以外にpadding、border、margin があります。

どの範囲のサイズを取得したいかによって若干書き方が変わってきます。

 

サンプルのHTMLとCSSを用意しました。

上のサンプルを元に解説します。

contentを取得

コンテンツ部分の高さや横幅を取得する方法です。

height には 150 が入ります。

width には 200 が入ります。

content + padding を取得

paddingも含む高さや横幅を取得する方法です。

height には 230 が入ります。

width には 280 が入ります。

content + padding + border を取得

border の太さも含む高さや横幅を取得する方法です。

height には 270 が入ります。

width には 320 が入ります。

content + padding + border + margin を取得

margin も含む高さや横幅を取得する方法です。

height には 330 が入ります。

width には 380 が入ります。

まとめ

セレクタで指定した要素の高さを取得するには height() を使う。

セレクタで指定した要素の横幅を取得するには width() を使う。

padding も含めたコンテンツのサイズを取得するには innerHeight() や innerWidth() を使う。

border も含めたコンテンツのサイズを取得するには outerHeight() や outerWidth() を使う。

margin も含めたコンテンツのサイズを取得するには outerHeight(true) や outerWidth(true) と書く。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA