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

透過 JavaScript 函式變更 div 的背景，可直接回應點擊或其他事件。將元素的 backgroundImage 樣式設為 CSS url(...) 值，並確保 div 有可見尺寸。若只有少數幾張預先定義的圖片，可改用 CSS 類別切換，讓圖片選項留在 CSS 中。img 元素會在 div 內顯示圖片內容，但不會設定 div 的背景。

div 背景圖片的運作方式

CSS 的 background-image 會繪製在元素內容後方。它不會將圖片加入文件的內容結構，因此適合用於裝飾，或作為文字後方的圖像。div 仍須有可見的寬度和高度、內容，或其他版面配置規則；否則可能沒有可顯示背景的區域。

CSS 屬性是 background-image，而 JavaScript 會以 backgroundImage 存取對應的樣式屬性。將 url(\"/images/forest.jpg\") 這類字串指定給該屬性。請使用相對於頁面可正確解析、且瀏覽器能載入的 URL。若圖片僅供裝飾，使用背景圖片可避免將它加入無障礙樹；若圖片本身傳達內容，請使用附有適當替代文字的 img。

在 JavaScript 函式中設定背景圖片

將圖片 URL 傳入函式，並更新目標元素的行內樣式。第一個範例是可執行的小型 JavaScript 示範，用來展示屬性指定方式：其中的 style 物件代替元素的 style，因此可呈現函式的輸入與產生的 CSS 值，但不代表它是在瀏覽器 DOM 中執行。

執行此範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

function setBackgroundImage(element, imageUrl) {
  element.style.backgroundImage = `url("${imageUrl}")`;
}

const hero = { style: {} };
setBackgroundImage(hero, "/images/forest.jpg");
console.log(hero.style.backgroundImage);

url("/images/forest.jpg")

若要在實際網頁中加入互動，可使用包含 div 和按鈕的標記。兩個元素解析完成後，事件監聽器便會呼叫同一個函式。請將範例 URL 換成網頁可載入的圖片。此瀏覽器頁面範例僅提供原始碼，並未宣稱有任何執行輸出。

<div id="hero" class="hero">Featured content</div>
<button id="change-background" type="button">Change background</button>

<style>
  .hero {
    min-height: 12rem;
    padding: 1rem;
    background-position: center;
    background-size: cover;
  }
</style>

<script>
  function setBackgroundImage(imageUrl) {
    const element = document.getElementById("hero");
    if (!element) return;
    element.style.backgroundImage = `url("${imageUrl}")`;
  }

  const button = document.getElementById("change-background");
  button.addEventListener("click", () => {
    setBackgroundImage("/images/forest.jpg");
  });
</script>

指令碼放在標記之後，因此 JavaScript 查找 div 和按鈕時，這些元素已經存在。CSS 為 div 設定可見高度，並將背景縮放至覆蓋整個區域。若將指令碼移至獨立檔案，請使用 defer 載入，或將指令碼放在標記之後，確保元素先建立完成。若 URL 來自不受信任或任意來源，請先依照應用程式的規則驗證來源，再將它用於 CSS。

使用 CSS 類別切換背景圖片

若使用者要從固定的背景圖片中選擇，請在 CSS 中定義各個選項，再由 JavaScript 選取類別。例如，可將 CSS 規則寫成 .hero--forest { background-image: url(\"/images/forest.jpg\"); } 和 .hero--ocean { background-image: url(\"/images/ocean.jpg\"); }。為 div 指定一個設定尺寸與外觀的基礎類別，再使用 classList 切換這兩個圖片類別。

使用類別的函式可以先移除兩個選項類別，再加入指定的類別：element.classList.remove(\"hero--forest\", \"hero--ocean\"); element.classList.add(imageClass);。這樣能明確列出可用的圖片名稱，也能避免類別不斷累積而互相衝突。當圖片選項預先定義，且由 CSS 負責視覺呈現時，適合採用這種方式。若 URL 會動態變更或來自應用程式資料，則可直接指定 backgroundImage。

為什麼 img 元素不是背景圖片

使用 document.createElement(\"img\") 建立 img、指定其 src，再將它附加至 div，會使圖片成為該 div 的子元素。它仍是頁面版面中的內容；設定 display: none 只會隱藏它，不會將它變成背景。若圖片應作為可見且具語意的內容，或需要預先準備圖片元素本身，可以採用這種方式。若要在其他內容後方顯示背景，請設定 backgroundImage 或套用 CSS 類別。

選擇並測試合適的做法

背景固定時，只用 CSS 即可。URL 會動態變更時，直接更新樣式；若只有少數幾種設計好的狀態，則使用類別。CSS 可透過 background-image 中以逗號分隔的圖層支援多重背景；列表中的第一個圖層會繪製在最上方。若圖層組合固定，可留在 CSS 中；若組合會動態變更，則可透過 JavaScript 指定完整的逗號分隔值。

若圖片沒有顯示，請確認 ID 查詢取得的是預期元素、檢查計算後的 background-image 值、直接開啟圖片 URL，並確認 div 有可見尺寸。瀏覽器的網路面板可以顯示失敗的請求。伺服器政策可能會封鎖來自其他來源的圖片，或要求授權；使用外部 URL 並不代表取得圖片的使用權。若要預先載入圖片，可建立 Image 物件，並在切換背景前設定其 src；預先載入可能縮短等待時間，但無法保證之後的請求一定成功。這些是可在自己的網頁中實際檢查的項目，並非此處已執行的檢查。