如何使用 JavaScript 动态更改 Div 的背景图像？

如何使用 JavaScript 动态更新 Div 背景图像

在处理网页时，通常需要动态更改特定元素的背景图像。 JavaScript 提供了一种简单的方法来实现此目的。

在您提供的示例中，您希望在发生特定事件时更改具有“ghor”类的 div 的背景图像（在本例中单击该 div） ）。为此，您可以使用以下 JavaScript 代码：

<code class="javascript">function chek_mark() {
  var el = document.getElementById("a").style.backgroundImage;
  if (el.includes("Black-Wallpaper.jpg")) {
    el = "url('cross1.png')";
  } else if (el.includes("cross1.png")) {
    alert("This is working too.");
  }
}</code>

此代码将首先从 div 的 style 属性中检索当前背景图像。如果图像是“Black-Wallpaper.jpg”，它会将背景图像更新为“cross1.png”。如果它已经是“cross1.png”，它将显示一条警报。

要实现上述代码，您可以创建一个处理单击事件并调用 chek_mark 函数的函数：

<code class="html">&lt;div class=&quot;ghor&quot; id=&quot;a&quot; onclick=&quot;change_background()&quot;&gt;...&lt;/div&gt;</code>

<code class="javascript">function change_background() {
  chek_mark();
}</code>

当点击 div 时，它会调用 chek_mark 函数并根据您的条件更新背景图片。

以上是如何使用 JavaScript 动态更改 Div 的背景图像？的详细内容。更多信息请关注PHP中文网其他相关文章！