JavaScriptで画像を追加する方法-jsチュートリアル-php.cn

JavaScriptで画像を追加する方法

醉折花枝作酒筹

リリース： 2023-01-07 11:44:59

オリジナル

20323 人が閲覧しました

JavaScript を使用して画像を追加する場合は、まず createElement() メソッドを使用して img 要素を作成し、画像の URL アドレス値を img 要素の src 属性に割り当てます。 appendChild() メソッドを使用して img 要素を追加します。dom オブジェクトを指定するだけです。

JavaScriptで画像を追加する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript を使用して画像を追加する場合は、まず createElement() メソッドを使用して img 要素を作成し、画像の URL アドレス値を img 要素の src 属性に割り当てます。 appendChild() メソッドを使用して img 要素を追加します。dom オブジェクトを指定するだけです。

createElement() メソッド

createElement() メソッドは、名前を指定して要素を作成します。

構文:

document.createElement(nodename)

ログイン後にコピー

パラメータ:ノード名:必須。要素の名前を作成します。

戻り値: 作成された要素ノード

getElementById() メソッド

getElementById() メソッドは、指定された ID 引用を持つ最初のオブジェクトを返すことができます。

HTML DOM では、要素を検索するための複数のメソッドが定義されています。getElementById() に加えて、getElementsByName() および getElementsByTagName() もあります。

指定された ID を持つ要素が存在しない場合は、null を返します。

指定された ID を持つ要素が複数ある場合は、未定義を返します。

構文:

document.getElementById(elementID)

ログイン後にコピー

appendChild() メソッド

appendChild() メソッドは、ノードの子ノードリストの末尾に新しい子ノードを追加します。。

ヒント: newchild がドキュメントツリーにすでに存在する場合、newchild はドキュメントツリーから削除され、新しい位置に再挿入されます。 newchild が DocumentFragment ノードの場合、直接挿入されませんが、その子ノードが現在のノードの childNodes[] 配列の末尾に順番に挿入されます。

appendChild() メソッドを使用すると、要素を別の要素に削除できます。

構文:

node.appendChild(node)

ログイン後にコピー

パラメータ: ノード: 必須。追加するノードオブジェクト。

例: div 要素に画像を追加する JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function() {
				var bigImg = document.createElement("img"); //创建一个img元素

				bigImg.src = "logo.png"; //给img元素的src属性赋值
				//bigImg.width="320";  //320个像素 不用加px
				var myp = document.getElementById(&#39;myp&#39;); //获得dom对象
				myp.appendChild(bigImg); //为dom添加子元素img

			};
		</script>
	</head>
	<body>
		<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
	</body>

</html>

ログイン後にコピー

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptで画像を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。