<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って開発者の足をどこまで引っ張るつもりなんでしょうか?
余分な時間を使ってしまいました。
この記事へのコメントはありません。