JavaScript

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

 

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

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    Geolocation APIを使ってスマホで位置情報取得

    iphoneやAndroidのGPSを利用して位置情報を取得したい場合…

  2. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

  3. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  4. JavaScript

    Javascript

    Google Maps API Ver.3 で地図を表示

    久しぶりにGoogleMap APIを利用しようとして、今更なんで…

  5. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

  6. JavaScript

    Javascript

    Google Static Maps API V1の終了

    かなり前に組んだガラケーサイトでGoogle Mapを表示させていたの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. PHP(ピー・エイチ・ピー)
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. Security(セキュリティ)
  7. WP:WordPress(ワードプレス)
  8. WP:WordPress(ワードプレス)
  9. WP:WordPress(ワードプレス)
  10. アフィリエイト
PAGE TOP