如何使用 JavaScript 使用 If-Else 條件動態變更 Div 的背景影像？

使用JavaScript 更改Div 背景圖像

問題：

問題：

問題：

<code class="html"><div style="text-align:center;">
  <div class="ghor" id="a" onclick="chek_mark()"></div>
  function call
</div>
<script type="text/javascript">
  function chek_mark() {
    var el = document.getElementById("a").style.backgroundImage;
    if (el.url("Black-Wallpaper.jpg")) {
      el.url = "cross1.png";
    } else if (el.url("cross1.png")) {
      alert("<h1>This is working too.</h1>");
    }
  }
</script></code>

程式碼片段：

說明：

目標是根據當前背景圖像更新類別為“ghor>

<code class="javascript">document.getElementById('a').style.backgroundImage="url(images/img.jpg)";</code>

目標是根據當前背景圖像更新類別為“ghor”的div的背景圖像。

答案：

要實現這一點，您可以使用以下代碼：

<code class="css">.ghor {
    background-image: url('Black-Wallpaper.jpg');
    background-size: cover;
    border-radius: 5px;
    height: 100px;
    width: 100px;
    box-shadow: 2px 5px 7px 7px white;
    display:inline-block; 
}</code>

說明：

此程式碼檢索id 為「a」的div 元素，並將其背景圖像樣式屬性設定為指定的圖像路徑。透過將“images/img.jpg”替換為所需的圖片路徑，您可以動態變更背景圖片。 「.ghor」類別的CSS 範例： 請注意，提供的程式碼僅供說明之用，可能需要根據您的具體實作和CSS 樣式進行調整。

以上是如何使用 JavaScript 使用 If-Else 條件動態變更 Div 的背景影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！