JavaScript 背景圖片 在網(wǎng)頁中，背景圖片是頁面設(shè)計中重要的一部分。通常我們會使用 CSS 來添加背景圖片，但是這篇文章將介紹使用 JavaScript 往元素添加背景圖片的方法。 假設(shè)我們有一個 HTML 片段，其中一個 div 用于顯示背景圖片，如下所示：

這是一個 div，但沒有背景圖片

我們想往這個 div 添加一個背景圖片，可以使用 JavaScript 實現(xiàn)。下面是使用純 JavaScript 的實現(xiàn)方法:

var div = document.querySelector('.bg');
div.style.backgroundImage = 'url("https://example.com/background.jpg")';

在這個例子中，我們使用了 JavaScript 的 DOM API 來獲取 div 元素，然后通過樣式屬性設(shè)置了背景圖片。上面的代碼中，我們使用了 url() 函數(shù)來設(shè)置背景圖片的 URL。這個 URL 可以是相對于當(dāng)前網(wǎng)頁的相對路徑，也可以是絕對路徑。 下面是一個使用 jQuery 庫的例子，相比較上面的例子使用起來更加簡單：

$('.bg').css('background-image', 'url("https://example.com/background.jpg")');

在這個例子中，我們使用了 jQuery 庫來獲取 div 元素，然后使用 css() 函數(shù)設(shè)置了背景圖片。同樣地，我們使用了 url() 函數(shù)來設(shè)置圖片的 URL。 如果我們想在運行時動態(tài)地改變背景圖片，可以使用一個函數(shù)來達到這個目的。下面是一個例子：

function setBackgroundImage(url) {
var div = document.querySelector('.bg');
div.style.backgroundImage = 'url("' + url + '")';
}
setBackgroundImage('https://example.com/background1.jpg');
// 1 秒鐘后改變背景圖片
setTimeout(function() {
setBackgroundImage('https://example.com/background2.jpg');
}, 1000);

在這個例子中，我們定義了一個函數(shù) setBackgroundImage()，它可以根據(jù)傳入的 URL 動態(tài)地改變背景圖片。在上面的代碼中，我們展示了如何使用這個函數(shù)動態(tài)地切換背景圖片。 總之，使用 JavaScript 可以很容易地向網(wǎng)頁中添加背景圖片。我們可以使用純 JavaScript 或者 jQuery 來完成這個任務(wù)。如果我們想動態(tài)地改變背景圖片，可以定義一個函數(shù)，讓它根據(jù)傳入的 URL 來改變背景圖片。