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

 

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

関連記事

  1. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

  2. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  3. JavaScript

    Javascript

    「jQuery ui Datepicker」の基本的な使い方

    先日フォームの作成依頼があった際に、日付欄はユーザーに直接…

  4. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  5. JavaScript

    Javascript

    Google マップのストリートビューを実装してみました!!

    Google マップのストリートビューを実装してみました。&nbs…

  6. JavaScript

    Javascript

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

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

コメント

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

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

最近の記事

  1. PHP
  2. PHP
  3. 風邪予防
  4. WordPress(WP)
  5. PHP
  6. 宅建
  7. アンチWP
  8. 日本語ドメイン
  9. WordPress(WP)
  10. SSL(HTTPS通信)
PAGE TOP