通過 JavaScript 中的函式設定 div 的背景影象

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 HTML DOM style 屬性設定 div 元素的背景
  2. 在 JavaScript 中使用 createElement 初始化 div 元素中的 img 元素以設定背景
通過 JavaScript 中的函式設定 div 的背景影象

JavaScript 有多種方法可以使用影象源並將它們嵌入 HTML 正文中。

onclickonchange 方法是用於更改 div 元素的函式。我們還可以在指向指令碼行的 div 元素內建立一個 img 元素。

我們將執行兩種設定 div 元素背景的方法。我們將在這兩種情況下使用函式,不同之處在於建立一個 img 元素並在原始方法中設定背景。

在 JavaScript 中使用 HTML DOM style 屬性設定 div 元素的背景

我們將首先在 HTML 結構中設定一個 div 元素,然後是一個名為 divid

下面的控制元件轉到我們的 button onclick 方法將觸發功能 display 的指令碼標籤。

這裡的 style 屬性將在點選操作後操縱 DOM 設定背景影象。

程式碼片段:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="Div" style="height:200px;width:200px;">
<button onclick="display()">Click</button>
</div>
<script>
function display(){
document.getElementById("Div").style.backgroundImage = 'url("https://pngimg.com/uploads/acorn/acorn_PNG37020.png")';
}
</script>
</body>
</html>

輸出:

使用 HTML DOM style 屬性設定 div 元素的背景

在 JavaScript 中使用 createElement 初始化 div 元素中的 img 元素以設定背景

在這種情況下,我們將在 HTML 結構中建立一個 div 元素,後跟一個 id

任務的其餘部分生成一個物件,該物件將在指令碼標籤中儲存影象 URL

稍後我們將獲取 div id 並建立 img 元素。然後,影象物件將附加儲存的 URL 並在 HTML 正文上預覽。

程式碼片段:

<!DOCTYPE html>
<html>
<body>
<div id="imgDiv" style="height:200px;width:200px;"></div>
<script>
var pic = "https://pngimg.com/uploads/acorn/acorn_PNG37020.png";
function display(pic) {
let div = document.getElementById("imgDiv");
let img = document.createElement("img");
img.src = pic
div.append(img);
}
display(pic);
</script>
</body>
</html>

輸出:

使用 createElement 初始化 div 元素中的 img 元素設定背景

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Function