首页 >web前端 >css教程 >如何使用 JavaScript 使用 If-Else 条件动态更改 Div 的背景图像?

如何使用 JavaScript 使用 If-Else 条件动态更改 Div 的背景图像?

Susan Sarandon
Susan Sarandon原创
2024-11-02 10:03:30980浏览

How to Dynamically Change a Div's Background Image with JavaScript Using an If-Else Condition?

使用 JavaScript 更改 Div 背景图像

问题:

如何更改背景使用 JavaScript 的 div 元素的图像,使用 if-else 条件?

代码片段:

<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”的div的背景图像。

答案:

要实现这一点,您可以使用以下代码:

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

说明:

此代码检索 id 为“a”的 div 元素,并将其背景图像样式属性设置为指定的图像路径。通过将“images/img.jpg”替换为所需的图像路径,您可以动态更改背景图像。

“.ghor”类的 CSS 示例:

<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>

请注意,提供的代码仅供说明之用,可能需要根据您的具体实现和 CSS 样式进行调整。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn