jQueryで要素の高さを取得しようとするとGoogle Chromeでうまく出来ない時の解決法

20130117

少しはまったのでご紹介します。

要素の高さを取得する

jQueryで要素の高さをとるのは簡単です。

これだけ!
しかし、何故かGoogle Chromeでは正しい値を取得できません。

Google Chrome対策

少し調べてみると、Google Chromeでは画像等の要素を読み込む前に上記のJSが動いてしまうため、
正しい数値を得られないとのことです。
ですので、画像の読み込みが終わってから高さを取得するように書き換えます。

IE対策

上記のコードに書き換えると今度は昔のIEで動作しなくなってしまったので、
Google Chromeと別のブラウザで取得方法を異なるように書き換えます。

ユーザーエージェントでGoogle Chrome用と他のブラウザ用に書き分けました。
これでバッチリ高さを取得できます。
同じように横幅も同様の方法で可能です。