<img src="sample.jp" alt="サンプル" id="samp">
上記のように記述したimgタグから、
Javascriptで画像サイズを取得する場合、
var w = document.getElementById("samp").width;
var h = document.getElementById("samp").height;
とすれば、
横幅と高さをそれぞれ取得できるはず！！
ということで、
早速テストをしてみることに。
FirefoxはOK！！
ChromeもOK！！
で問題のIEの番です。
恐る恐るテストしてみると、
エラー？なのか横幅、高さ共に「0」が返ってきました。
どうもIEの場合には、
<img src="sample.jp" alt="サンプル" id="samp" width="150" height="150">
といったようにwidthとheightをタグ内に記載しておかないと取得できないらしいです。
エラーではなくてそういう仕様なんだと思うのですが、
IEだけ動作してくれないというのはよくあることなので、
今更ヘコむことも無く別の方法を探してみました。
で、
見つかったのはjQueryを使用する方法です。
早速jQueryをダウンロードしてきて、
<head>～</head>
内辺りで読み込んでやります。
<script src="./js/jquery-1.7.2.min.js"></script>
みたいな感じで。
次に、
var obj_w = document.getElementById("samp");
var w = $(obj_w).width();
var obj_h = document.getElementById("samp");
var h = $(obj_h).height();
としてやれば、
横幅、高さ共に無事取得できました。
いあや～、
IEって開発者の足をどこまで引っ張るつもりなんでしょうか？
余分な時間を使ってしまいました。
この記事へのコメントはありません。