2012年02月25日に投稿

[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法

jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。

下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。

[javascript]
$(function(){
var w = $(‘#target’).css(‘width’);
alert(w);
});
[/javascript]

jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。

[javascript]
$(function(){
$(‘#target’).bind(‘load’, function(){
var w = $(‘#target’).css(‘width’);
alert(w);
});
});
[/javascript]

関連記事

Leave a Reply