JavaScript

Javascriptで画像サイズを取得したい

<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って開発者の足をどこまで引っ張るつもりなんでしょうか?

余分な時間を使ってしまいました。

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

Twitter

アーカイブ

PAGE TOP