2021年12月14日

[jQuery]
jQueryで高さの取得が安定しないときに確認する項目

jQueryで高さを取得しようとしたら、どうもへんな隙間が空いてしまう。
リロードするたびに取得する高さの値が異なる、といったときに確認してほしいポイントのご紹介です。

結論から言うと・・・原因は画像です。

例えばサイトに固定ヘッダを用意して、コンテンツは固定ヘッダ分高さを開けたい。なんてことありますよね。
高さ固定だったらCSSで指定すればよいですが、レスポンシブ全盛の昨今、PCとスマホで高さが異なるなんて日常茶飯事です。

高さを取得するのにjQueryでheight、innerHeight、outerHeightなどのメソッドを使います。

var hoge = $('header').height(); //コンテンツの高さを取得
var hoge = $('header').innerHeight(); //paddingを含めた高さ
var hoge = $('header').outerHeight(); //borderを含めた高さ

高さの取得方法は本筋ではないので今回は端折りますが、

$(function() {
    $('#wrapper').css('top', $('header').innerHeight());
});

今回ひっかかったのがこんな感じのコードでして、#wrapperのtopプロパティをheaderの高さに合わせる、という内容になります。
これを実行したところ、何回リロードしても意味不明な高さが取得され、この値どこから取得してるんだ？？？という状態になりました。

実はこれは、headerの中にある画像が原因でした。

どの時点で表示するか

jQueryで読み込み完了後に実行する方法として、大きく分けて以下のパターンがあります。

$(function() {〜});
$(window).on('load', function() {〜});

２つの違いは、DOMが読み込まれた直後に実行するか、ブラウザに表示された直後に実行するか、の違いになります。
私はうろ覚えで$(function() {〜});は画像も読み込まれた後に実行と記憶していたのですが、実際はloadでないと高さ等は取得できないようです。
どうも高さの値がおかしい、という場合はチェックしてみてください。

※ $(window).load(function () { 〜 });　という書き方は非推奨。ver3.0以降では存在すらしないとのこと。
※ $(document).ready(function(){ 〜 });　という書き方は　$(function() {〜});　と同じ意味。

最終的にきちんと取得できるようになった書き方は以下の通り。

$(window).on('load', function() {
    $('#wrapper').css('top', $('header').innerHeight());
});

参考：

jQueryで読み込んでから処理を開始 - Qiita

何で読み込み完了後に処理を行うのか。ブラウザは、HTMLを読みながら基本的に上から順に処理していく。なので、script…

https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4

• 「NFT」って何？ NFTの基礎講座
• WordPressで専用プラグインを使わずCTI＋CRMっぽいものを実現してみる

気になったら
まずはご相談を

あなたの悩みのために専門家がチームを組み、課題解決に取り組みます。
まずはお気軽にお問い合わせください。

日本全国どこでも対応します。