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の短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

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

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

  2. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

  3. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

  6. JavaScript

    Javascript

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

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

コメント

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

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

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. SONY 広角レンズ「SEL1018」
  3. PHP(ピー・エイチ・ピー)
  4. 俺流塩ラーメン
  5. SEO(エスイーオー)
  6. Linux(リナックス)
  7. Linux(リナックス)
  8. PHP(ピー・エイチ・ピー)
  9. バージョンアップ
  10. Google Search(グーグル検索)
PAGE TOP