JavaScriptで画像サイズを取得する方法 (高さ・幅)

JavaScriptの標準メソッド

• image.width と image.height: 現在の要素の幅と高さを取得します。
• image.naturalWidth と image.naturalHeight: 画像本来の幅と高さを取得します。

var image = new Image();
image.src = 'image.jpg';

image.onload = function() {
  console.log('Width:', image.naturalWidth);
  console.log('Height:', image.naturalHeight);
};

jQueryのメソッド

var image = $('#myImage');

console.log('Width:', image.width());
console.log('Height:', image.height());

注意事項

• $(image).width() と $(image).height()は、要素のスタイルやレイアウトの影響を受ける可能性があります。
• image.naturalWidth と image.naturalHeightは、画像が完全に読み込まれていないと正確な値を返しません。

例

<img id="myImage" src="image.jpg">

$(document).ready(function() {
  $('#myImage').load(function() {
    console.log('Width:', $(this).width());
    console.log('Height:', $(this).height());
  });
});

解説

• .load()メソッドは、画像が完全に読み込まれた後に実行されるイベントハンドラーを登録します。
• #myImageは、画像要素のIDです。

var image = new Image();
image.src = 'image.jpg';

image.onload = function() {
  console.log('Width:', image.naturalWidth);
  console.log('Height:', image.naturalHeight);
};

1. new Image()
   新しい画像オブジェクトを作成します。
2. image.src = 'image.jpg';
   画像のソースを設定します。
3. image.onload = function() { ... };
   画像が読み込まれた後に実行される関数（イベントハンドラー）を定義します。

var image = $('#myImage');

console.log('Width:', image.width());
console.log('Height:', image.height());

1. $('#myImage')
   IDが"myImage"の画像要素を取得します。

<img id="myImage" src="image.jpg">

$(document).ready(function() {
  $('#myImage').load(function() {
    console.log('Width:', $(this).width());
    console.log('Height:', $(this).height());
  });
});

• $('#myImage').load(function() { ... });
  画像が完全に読み込まれた後に実行されるイベントハンドラーを登録します。
• $(document).ready(function() { ... });
  ドキュメントが完全に読み込まれた後に実行される関数を定義します。

CSSのwidthとheightプロパティ

画像要素のスタイルを設定することで、幅と高さを取得できます。

var image = document.getElementById('myImage');
var width = window.getComputedStyle(image).width;
var height = window.getComputedStyle(image).height;

console.log('Width:', width);
console.log('Height:', height);

• width と height プロパティは、要素の幅と高さを取得します。
• window.getComputedStyle(image)
  要素の計算されたスタイルを取得します。

DOMのclientWidthとclientHeightプロパティ

要素のクライアント領域（パディングを除く）の幅と高さを取得します。

var image = document.getElementById('myImage');
var width = image.clientWidth;
var height = image.clientHeight;

console.log('Width:', width);
console.log('Height:', height);

• clientWidth と clientHeight は、要素のクライアント領域の幅と高さを取得します。

• width と height プロパティは、要素のスタイルやレイアウトの影響を受ける可能性があります。

選択基準

• image.clientWidth と image.clientHeight: 要素のクライアント領域のサイズを取得したい場合。
• window.getComputedStyle(image).width と window.getComputedStyle(image).height: 要素のスタイルの影響を受けたい場合。