ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで画像を追加する方法
JavaScriptで画像を追加する方法
- 醉折花枝作酒筹オリジナル
- 2021-07-22 11:41:2920369ブラウズ
JavaScript を使用して画像を追加する場合は、まず createElement() メソッドを使用して img 要素を作成し、画像の URL アドレス値を img 要素の src 属性に割り当てます。 appendChild() メソッドを使用して img 要素を追加します。dom オブジェクトを指定するだけです。
このチュートリアルの動作環境: 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('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 サイトの他の関連記事を参照してください。