ホームページ > 記事 > ウェブフロントエンド > JavaScriptで画像を追加する方法
JavaScriptで画像を追加する方法
- 藏色散人オリジナル
- 2021-06-26 14:05:065900ブラウズ
画像を追加する Javascript メソッド: 最初に createElement() メソッドを使用して img 要素を作成し、次に画像の URL アドレス値を img 要素の src 属性に割り当て、最後に appendChild() を使用します。メソッドを使用して、オブジェクト内の指定された dom に img 要素を追加します。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript で画像を追加するにはどうすればよいですか?
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 = "https://www.html.cn/static/images/logo.png"; //给img元素的src属性赋值
//bigImg.width="320"; //320个像素 不用加px
var myp = document.getElementById('myp'); //获得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 サイトの他の関連記事を参照してください。