福岡 web・ホームページ制作 Eight(エイト)

jqueryでdivのheightを取得しようとしたけど取れないときはここを疑え!

Category:jQuery/javascript

div要素の高さを取得したいなと思ったので、jqueryのheight()を使って取得しようとしたんですが、見事にnullが返ってきた。なんですと。

いろいろ調べて原因がはっきりしたんですが、dom要素が生成されていないのに高さを取得しようとしていたのでnullがreturnされたんです。

解決方法は以下の2種類

jquery_height

head内でheight()を宣言するときは、$(document).ready()内で宣言する

ほとんど、height()でnullがでてくるのはこれが原因。head内でready()外にheight()を宣言することで、dom要素が生成されていないのに高さを取得しようとしていた現象が起こりnullがでてくるということ。

$(document).ready()はcssやらHTMLやらがすべて読み込まれてから、このready()内記述を読み込みますよという処理を行います。
詳しいready()とか$(function(){});の説明は下記URLを参照してください。

文殊堂 $(document).ready();について

body閉じタグ直前にjavascript関係は宣言する

この回避法も有効です。htmlに直接書き込む場合はbody閉じタグ直前に書き込むと回避できます。これはプログラムは上から下に読み込まれていきますので、hight()より先に記述してある取得したいdom要素はすでに生成されており、heightが取得可能となります。

と、言うわけで

作業中、頭の中で「???」となったんで調べてみました。
動作するはず!って思い込みで作業してたら気づきにくいミスだと思います。あなたはきちんと回避してくださいね。

Related Article

Comments

Page Top