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);
	});
});

 

上記テストページはこちら