2015/10/14
画像の幅や高さを取得する方法
スポンサーリンク
ハマってしまった・・・
jqueryで画像の幅を取得しようとしたら、幅が0になりました。
前もこれで躓いたことあるなぁ~と思ってググってみると、真っ先に出てくる対処法は、loadを使う方法。
【jQuery】
$(function(){ $('img').bind('load',function(){ var $W = $(this).width(); $(this).parents('.wrap').find('p').append($W); }); });
・・・・が、これでも0に。
bindじゃなくてonか?と思ってやってみてもやっぱりゼロ。
いろいろいろいろ考えた結果、
単純にその部分に、cssでdisplay:none;を設定していたからでした。
ボタン切り替えで表示非表示をしているところで、読み込み時点ではその画像は非表示だったので、0になってた( ̄Д ̄;)
よく考えれば当たり前のことなんですけどね・・・。
そして、表示のままやってみると、loadやonを使わなくても幅をゲットできました。( ̄ー ̄?)…..??アレ??
【HTML】
<div class="wrap"> <h1>display設定なし</h1> <div> <img src="img/rose.jpg" alt="" /> </div> <p>幅:</p> </div> <div class="wrap"> <h1>縮小</h1> <div> <img width="300" src="img/rose.jpg" alt="" /> </div> <p>幅:</p> </div> <div class="wrap hide"> <h1>display:none</h1> <div> <img src="img/rose.jpg" alt="" /> </div> <p>幅:</p> </div>
【jQuery】
$(function(){ $('img').each(function(){ var $W = $(this).width(); $(this).parents('.wrap').find('p').append($W); }); });
上記テストページはこちら