JavaScript を使用して画像要素を動的に作成するにはどうすればよいですか?

HTML では、Web ページ上に画像を表示するために image 要素が使用されます。 「src」、「alttext」、「height」、「width」などの要件に応じて複数の属性を取得します。

場合によっては、Web ページに画像を動的に追加する必要があります。たとえば、私たちは未知の量の映画データをデータベースに保存します。映画データを取得し、各映画の詳細とともに映画画像を表示する必要があります。この場合、JavaScript を使用して画像とデータを DOM に追加する必要があります。

次に、JavaScript を使用して Web ページに画像要素を追加する方法を学びます。

Document.createElement() メソッドを使用する

document.createElement() メソッドは、JavaScript を使用して任意の HTML 要素を作成します。タグ名をパラメータとして受け取り、HTML 要素を返します。

JavaScript で HTML 要素を作成した後、そのさまざまな属性を変更して DOM に添付し、Web ページ上に画像を表示できます。

＃＃＃文法＃＃＃

ユーザーは document.createElement() メソッドを使用して、次の構文に従って画像要素を動的に作成できます。

リーリー

上記の構文では、createElement() メソッドを使用して画像要素を作成し、画像要素の「src」属性を更新します。

＃＃＃例＃＃＃

以下の例では、最初に画像要素を作成します。その後、その「src」属性を、Web ページに表示したい画像の URL で更新します。

次に、ID を使用して DOM から事前定義された div 要素にアクセスし、appendChild() メソッドを使用して新しく作成した画像を div 要素の子として追加します。

出力では、JavaScript を使用して画像が追加されていることがわかります。

リーリー ＃＃＃例＃＃＃

以下の例では、ボタンを作成します。ユーザーがボタンをクリックするたびに、createImage() 関数が実行されます。

createImage() 関数では、createElement() メソッドを使用して新しい画像要素を作成し、その「src」属性値を更新します。さらに、setAttribute() メソッドを使用して、画像の ID、高さ、幅を設定します。

出力では、ユーザーはボタンをクリックして画像を 200 x 200 次元で表示できます。ただし、ユーザーはコード内の次元を変更し、コードを実行して出力を確認することができます。

リーリー

Image() コンストラクターを使用する

image() は、JavaScript で image 要素のインスタンスを作成するために使用されるコンストラクターです。 「new」キーワードを指定したコンストラクターを使用して JavaScript で画像のインスタンスを作成し、それを DOM オブジェクトにアタッチします。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って Image() コンストラクターを使用して JavaScript を通じてイメージを作成できます。

リーリー

上記の構文では、image() コンストラクターを使用して image 要素のインスタンスを作成し、その src 属性の値を更新します。

＃＃＃例＃＃＃

以下の例では、ユーザーがボタンをクリックすると、createImage() 関数が実行され、DOM に動的にアタッチされます。

createImage() 関数では、Image() コンストラクターを使用してイメージ インスタンスを初期化し、その src 属性の値を更新します。さらに、属性値を更新して div 要素の子として添付することで、画像の幅と高さを設定します。

リーリー ＃＃＃例＃＃＃

以下の例では、JavaScript を使用して複数の画像を Web ページに添付します。

addMultiple() 関数には、画像 URL の配列があります。配列をループし、各反復で新しい画像要素を作成し、指定されたソース URL で src 属性を更新し、それを DOM に追加します。

出力で、ユーザーはボタンをクリックすると、Web ページ上に 5 つの動的な画像が表示されます。さらに、ユーザーがボタンをクリックするたびに画像が変わります。

リーリー

画像を Dom 要素に動的に添付する 2 つの方法を学びました。 createElement() メソッドは、画像要素を含む任意の HTML 要素のインスタンスを作成します。 image() コンストラクターは、image 要素のインスタンスを作成するためにのみ使用され、他の HTML 要素には使用されません。

さらに、前の例のように、リアルタイム開発中に画像 URL の配列を取得し、Web ページに複数の動的画像を追加する必要がある場合があります。

以上がJavaScript を使用して画像要素を動的に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。