JavaScriptで画像を追加する方法-フロントエンドQ&A-php.cn

JavaScriptで画像を追加する方法

藏色散人

リリース： 2021-06-26 14:05:06

オリジナル

5932 人が閲覧しました

画像を追加する Javascript メソッド: 最初に createElement() メソッドを使用して img 要素を作成し、次に画像の URL アドレス値を img 要素の src 属性に割り当て、最後に appendChild() を使用します。メソッドを使用して、オブジェクト内の指定された dom に img 要素を追加します。

JavaScriptで画像を追加する方法

この記事の動作環境: 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(&#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 サイトの他の関連記事を参照してください。