jQueryのheight()やouterHeight()で高さが取得できない場合の解決方法

こんにちは、イナフクカズヤ(@Inafuku_Kazuya)です。
先日、jQueryのheight()やouterHeight()メソッドでdivの高さ(今回はギャラリー)を取得したかったんですが、できませんでした。

$(function(){
  var g = $('.gallery').outerHeight();
  console.log(g);
  // コンソールログに表示
});

みてわかると思うけど、画像のギャラリーの高さです。
0とかじゃなくて、25とか数字はでてきます。
なので、全く高さが取得できないわけではない。

そこで、こちらの記事を拝見しました。

jQueryのinnerHeight()やouterWidth() メソッド【div箱の高さが取得できない！の原因２】

なるほど！画像の取得前だからか！
というわけで、下記に変更。

$(window).on("load",function(){
  // padding内側の高さを取得し、変数に格納
  var h = $('.gallery-block').height();
  var g = $('.gallery').outerHeight();
  console.log(h);
  console.log(g);
  // コンソールログに表示
});

仕様しているバージョンのjQueryが3系なので、
$(window).loadではなく上記を使用しました。

これで、無事に高さが取得できました！
よかった！！