JavaScriptでimg要素を作成する最適なコードとは？

JavaScriptでimg要素を作成する基本

JavaScriptで新しい画像（img要素）を動的に生成したい場合、いくつかの方法で幅や高さを設定できます。ここでは、代表的な3つの手法を紹介します。状況に応じて最適な方法を選んでください。

方法1：setAttribute()メソッドを使う

setAttribute()メソッドを使えば、img要素のwidth属性を直接設定できます。

myImg.setAttribute('width', '5px');

方法2：widthプロパティに代入する

HTMLImageElementオブジェクトが持つwidthプロパティに値を代入する、シンプルで直感的な方法です。

myImg.width = '5';

方法3：styleプロパティでCSSとして指定する

スタイル経由で幅を制御したい場合は、style.widthを使用します。この場合、単位（pxなど）の指定を忘れないようにしましょう。

myImg.style.width = '5px';

Imageコンストラクタで幅と高さを同時に指定する

もうひとつの便利な方法として、new Image()コンストラクタがあります。これを使えば、画像オブジェクトの生成と同時に幅・高さを指定できます。次のコードでは、5×5ピクセルの画像を作成し、画像URLを設定しています。

var myImg = new Image(5, 5);
myImg.src = 'https://www.example.com';

用途に応じてこれらの方法を使い分けることで、柔軟かつ効率的に画像要素を操作できます。単純な属性設定ならwidthプロパティ、細かいスタイル制御が必要ならstyle.width、生成時のサイズ指定ならImageコンストラクタがおすすめです。