資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 動態建立影像元素？
在 HTML 中，影像元素用於在網頁上顯示影像。根據需求，它可以接受多個屬性，例如“src”、“alttext”、“height”、“width”等。
在某些情況下，我們需要動態地向網頁新增影像。例如，我們在資料庫中儲存了數量未知的電影資料。我們需要獲取電影資料，併為每部電影顯示電影影像及其詳細資訊。在這種情況下，我們需要使用 JavaScript 將影像和資料附加到 DOM。
下面，我們將學習如何使用 JavaScript 向網頁新增影像元素。
使用 Document.createElement() 方法
document.createElement() 方法使用 JavaScript 建立任何 HTML 元素。它以標籤名稱作為引數，並返回 HTML 元素。
在 JavaScript 中建立 HTML 元素後，我們可以修改其各種屬性，並將其附加到 DOM 以在網頁上顯示影像。
語法
使用者可以按照以下語法使用 document.createElement() 方法動態建立影像元素。
let dynamicImage = document.createElement('img');
dynamicImage.src = URL;
在上面的語法中，我們使用 createElement() 方法建立了影像元素，並更新了影像元素的“src”屬性。
示例
在下面的示例中，我們首先建立了影像元素。之後，我們將想要在網頁上顯示的影像 URL 更新到它的“src”屬性。
接下來，我們使用其 ID 從 DOM 訪問預定義的 div 元素，並使用 appendChild() 方法將新建立的影像作為 div 元素的子元素附加。
在輸出中，使用者可以看到使用 JavaScript 新增的影像。
<html>
<body>
<h3>Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
<div id = "img"> </div>
<script>
let img = document.getElementById('img');
// Create image element
let dynamicImage = document.createElement('img');
// Initialize the image source
dynamicImage.src = "https://tutorialspoint.tw/static/images/logo.png";
// Add image to DOM
img.appendChild(dynamicImage);
</script>
</body>
</html>
示例
在下面的示例中，我們建立了按鈕。每當使用者點選按鈕時，它都會執行 createImage() 函式。
在 createImage() 函式中，我們使用 createElement() 方法建立一個新的影像元素，並更新其“src”屬性值。此外，我們使用 setAttribute() 方法設定影像的 ID、高度和寬度。
在輸出中，使用者可以點選按鈕檢視 200 x 200 畫素的影像。但是，使用者可以在程式碼中更改尺寸並執行程式碼以檢視輸出。
<html>
<body>
<h3>Using the <i> document.createElement() method </i> to Create image element dynamically using JavaScript </h3>
<div id = "img"> </div>
<button id = "addImage" onclick = "createImage()"> Create Image </button>
<script>
function createImage() {
let img = document.getElementById('img');
let newImage = document.createElement('img');
newImage.src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png";
// Set attribute values for the image
newImage.setAttribute('id', 'myImage');
newImage.setAttribute('width', '200px');
newImage.setAttribute('height', '200px');
img.appendChild(newImage);
}
</script>
</body>
</html>
使用 Image() 建構函式
image() 是一個建構函式，用於在 JavaScript 中建立影像元素的例項。我們使用帶有“new”關鍵字的建構函式在 JavaScript 中建立影像例項，並將其附加到 DOM 物件。
語法
使用者可以按照以下語法使用 Image() 建構函式使用 JavaScript 建立影像。
Let img = new Image(); img.src = URL;
在上面的語法中，我們使用 image() 建構函式建立了影像元素的例項，並更新了其 src 屬性的值。
示例
在下面的示例中，當用戶點選按鈕時，它會執行 createImage() 函式以動態附加到 DOM。
在 createImage() 函式中，我們使用 Image() 建構函式初始化影像例項，然後更新其 src 屬性的值。此外，我們透過更新屬性值來設定影像的寬度和高度，並將其作為 div 元素的子元素附加。
<html>
<body>
<h3>Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
<div id = "img"> </div>
<button id = "addImage" onclick = "createImage()"> Create Image </button>
<script>
function createImage() {
let img = document.getElementById('img');
let devImage = new Image();
devImage.src = "https://tutorialspoint.tw/static/images/development.svg";
devImage.setAttribute('width', '300px');
devImage.setAttribute('height', '300px');
img.appendChild(devImage);
}
</script>
</body>
</html>
示例
在下面的示例中，我們使用 JavaScript 將多個影像附加到網頁。
在 addMultiple() 函式中，我們有一個影像 URL 陣列。我們遍歷陣列，在每次迭代中，我們建立一個新的影像元素，使用給定的源 URL 更新 src 屬性，並將其附加到 DOM。
在輸出中，使用者可以點選按鈕檢視網頁上的五個動態影像。此外，每次使用者點選按鈕時，它都會更改影像。
<html>
<body>
<h3>Using the <i> Image() constructor </i> to Create image element dynamically using JavaScript</h3>
<div id = "img"> </div>
<br> <br>
<button id = "addImage" onclick = "AddMultiple()"> Add Multiple Images </button>
<script>
function AddMultiple() {
let img = document.getElementById('img');
let imageURLS = [
"https://picsum.photos/200/300",
"https://picsum.photos/200/300/?blur",
"https://picsum.photos/200/300.webp",
"https://picsum.photos/200",
"https://picsum.photos/200/300"
]
// Fetch random images and append to the DOM
for (let i = 0; i < 5; i++) {
let randomImage = new Image();
randomImage.src = imageURLS[i];
randomImage.alt = "Random Image";
randomImage.width = 100;
randomImage.height = 100;
// Add right and left margin to the image
randomImage.style.marginRight = "10px";
randomImage.style.marginLeft = "10px";
img.appendChild(randomImage);
}
}
</script>
</body>
</html>
我們學習了兩種將影像動態附加到 Dom 元素的方法。createElement() 方法建立任何 HTML 元素（包括影像元素）的例項。image() 建構函式僅用於建立影像元素的例項，而不是其他 HTML 元素。
此外，正如最後一個示例所示，我們可能會在即時開發中獲得一個影像 URL 陣列，我們需要將多個動態影像附加到網頁。
10K+ 次瀏覽
